<div class="table-responsive">
    <table class="table table-striped table-bordered table-hover datatable" >
        <thead>
        <tr>
            <th>&nbsp;</th>
            <th>ID</th>
            <th>Notiz</th>
            <th>Name</th>
            <th>Kontingent</th>
            <th>Mitglied (ID)</th>
            <th>Start</th>
            <th>Ende</th>
            <th>Preis</th>
            <% if ( filter && filter === 'claim' )  {   %>
                <th>Bezahlt</th>
                <th>Offen</th>
                <th>Frist</th>
            <% } else { %>
                <th>Erstellt</th>
            <% }    %>
            <th>&nbsp;</th>
        </tr>
        </thead>
        <tbody>
        <% for ( let ci = 0; ci < contracts.length; ci++ )  {   %>
            <tr data-type="contract"
                class="clickable"
                data-contract-id="<%= contracts[ ci ].id %>">
                <td class="selected-check text-center">
                    <i class="fa fa-check-square-o" aria-hidden="true"></i>
                    <i class="fa fa-square-o" aria-hidden="true"></i>
                </td>
                <td class="text-center">
                    <%= contracts[ ci ].id %>
                </td>
                <td>
                    <%= contracts[ ci ].admin_note ? contracts[ ci ].admin_note : '' %>
                </td>
                <td>
                    <%= contracts[ ci ].name %>
                </td>
                <td data-sort="<%= ( contracts[ ci ].isFlatrate() || 0 == contracts[ ci ].max_price_factor ) ? '0' : ( contracts[ ci ].current_price_factor / contracts[ ci ].max_price_factor ) %>">
                    <%= contracts[ ci ].isFlatrate() ? 'Flatrate' : ( _nf( contracts[ ci ].getCurrentPriceFactor(),2 ) + '/' + _nf( contracts[ ci ].getMaxPriceFactor(),2 ) ) %>
                </td>
                <td>
                    <%= contracts[ ci ].getProfileLastName() %>, <%= contracts[ ci ].getProfileFirstName() %> (ID: <%= ( null !== contracts[ ci ].getProfileId() ) ? contracts[ ci ].getProfileId() : '-' %>)
                </td>
                <td data-sort="<%= contracts[ ci ].getMomentStartDate().format( 'YYYYMMDD' ) %>">
                    <%= contracts[ ci ].getMomentStartDate().format( 'DD.MM.YYYY' ) %>
                </td>
                <td data-sort="<%= contracts[ ci ].getMomentEndDate().format( 'YYYYMMDD' ) %>">
                    <%= contracts[ ci ].getMomentEndDate().format( 'DD.MM.YYYY' ) %>
                </td>
                <td class="text-right"
                    data-sort="<%= contracts[ ci ].price %>">
                    <%= _nf( contracts[ ci ].getPrice(), 2 ) %>&nbsp;<%= contracts[ ci ].currency %>
                </td>
                <% if ( filter && filter === 'claim' )  {   %>
                    <td class="text-right"
                        data-sort="<%= contracts[ ci ].price_payed %>">
                        <%= _nf( contracts[ ci ].getPricePayed(), 2 ) %>&nbsp;<%= contracts[ ci ].currency %>
                    </td>
                    <td class="text-right"
                        data-sort=<%= ( contracts[ ci ].price - contracts[ ci ].price_payed ) %>">
                        <strong><%= _nf( contracts[ ci ].getClaimAmount(), 2 ) %>&nbsp;<%= contracts[ ci ].currency %></strong>
                    </td>
                    <td data-sort="<%= contracts[ ci ].getMomentPaymentDueDate().format( 'YYYYMMDD' ) %>">
                        <% if ( contracts[ ci ].isPaymentDue() ) {  %>
                            <span class="badge badge-danger"><%= contracts[ ci ].getMomentPaymentDueDate().format( 'DD.MM.YYYY' ) %></span>
                        <% } else {     %>
                            <%= contracts[ ci ].getMomentPaymentDueDate().format( 'DD.MM.YYYY' ) %>
                        <% }    %>
                    </td>
                <% } else { %>
                    <td data-sort="<%= contracts[ ci ].getMomentCreationDate().format( 'YYYYMMDDHHmm' ) %>">
                        <%= contracts[ ci ].getMomentCreationDate().format( 'HH:mm [Uhr] - DD.MM.YYYY' ) %>
                    </td>
                <% }    %>
                <td>
                    <% if ( filter === 'archive' ) {    %>
                        <button type="button"
                                data-type="btn-reactivate-contract"
                                data-contract-id="<%= contracts[ ci ].id %>"
                                class="btn btn-sm btn-primary">
                            <i class="fa fa-undo" aria-hidden="true"></i>
                        </button>
                        <button type="button"
                                data-type="btn-delete-contract"
                                data-contract-id="<%= contracts[ ci ].id %>"
                                class="btn btn-sm btn-danger">
                            <i class="fa fa-trash-o" aria-hidden="true"></i>
                        </button>

                    <% } else if ( filter === 'claim' ) { %>

                        <button type="button"
                                data-type="btn-edit-contract"
                                data-contract-id="<%= contracts[ ci ].id %>"
                                class="btn btn-sm btn-primary">
                            <i class="fa fa-pencil-square-o"></i>
                        </button>
                        <button type="button"
                                data-type="btn-mark-payed"
                                data-contract-id="<%= contracts[ ci ].id %>"
                                class="btn btn-sm btn-primary">
                            <i class="fa fa-check-square-o" aria-hidden="true"></i>
                        </button>

                    <% } else { %>
                        <button type="button"
                                data-type="btn-edit-contract"
                                data-contract-id="<%= contracts[ ci ].id %>"
                                class="btn btn-sm btn-primary">
                            <i class="fa fa-pencil-square-o"></i>
                        </button>
                        <button type="button"
                                data-type="btn-archive-contract"
                                data-contract-id="<%= contracts[ ci ].id %>"
                                class="btn btn-sm btn-primary">
                            <i class="fa fa-archive" aria-hidden="true"></i>
                        </button>
                    <% }    %>
                </td>
            </tr>
        <% }    %>
        </tbody>
    </table>
</div>
