<div class="table-responsive">
    <label><input type="checkbox" style="margin-left: 15px;margin-right: 5px;" class="filterContract" value="Active"/>ohne aktiven Vertag</label>
    <label><input type="checkbox" style="margin-left: 12px;margin-right: 5px;" class="filterOpenClaim" value="Active"/>nur offene Verrechnungen</label>
    <table class="table table-striped table-bordered table-hover datatable" >
        <thead>
        <tr>
            <th>ID</th>
            <th>Mitglied</th>
            <th>Straße</th>
            <th>PLZ</th>
            <th>Stadt</th>
            <th>Offene Verrechnungen</th>
            <th>Aktiver Vertrag vorhanden</th>
        </tr>
        </thead>
        <tbody>
        <% for ( let i = 0; i < ui.length; i++ )    {   %>
            <% if ( ui[ i ].member ) { %>
                <tr data-type="memberChargeItem"
                    class="clickable"
                    data-member-id="<%= ui[ i ].member ? ui[ i ].member.id : '' %>">
                    <td>
                        <%= ui[ i ].member.id %>
                    </td>
                    <td>
                        <%= ui[ i ].member.getName() %>
                    </td>
                    <td>
                        <%= ui[ i ].member.street ? ui[ i ].member.street : '---' %>
                    </td>
                    <td>
                        <%= ui[ i ].member.zip ? ui[ i ].member.zip : '---'  %>
                    </td>
                    <td>
                        <%= ui[ i ].member.city ? ui[ i ].member.city : '---'  %>
                    </td>
                    <td>
                        <%= ui[ i ].count  %>
                    </td>
                    <td>
                        <%= ui[ i ].hasActiveContract ? 'ja' : 'nein'  %>
                    </td>
                </tr>
            <% }    %>
        <% }    %>
        </tbody>
    </table>
</div>