<%=raw app.core.View.getTemplate( 'configuration-nav', { activeTab : 'contract' } ) %>
<div class="row">
    <div class="col-sm-12">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col">
                        <strong>Vertragsübersicht</strong><br />
                        <br />
                        <% if ( contracts.length > 0 )  {   %>
                            <div class="table-responsive">
                                <table class="table table-sm"
                                       data-id="table-contracts">
                                    <thead>
                                    <tr>
                                        <th class="text-center">ID</th>
                                        <th>Gruppe</th>
                                        <th>Name</th>
                                        <th class="text-center">Status</th>
                                        <th class="text-center">Kontingent</th>
                                        <th class="text-right">Zahlung</th>
                                        <th>&nbsp;</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <% var c = null; %>
                                    <% for ( let ci = 0; ci < contracts.length; ci++ )  {   %>
                                    <% c = contracts[ ci ]; %>
                                        <tr class="clickable"
                                            data-type="contract-row"
                                            data-contract-id="<%= c.getId() %>">
                                            <td class="text-center">
                                                <%= c.getId() %>
                                            </td>
                                            <td>
                                                <%= c.getContracteeData( 'groupName', '---' ) %>
                                            </td>
                                            <td>
                                                <%= c.getName() %>
                                            </td>
                                            <td class="text-center">
                                                <% if ( c.isRunning() ) { %>
                                                    <span class="badge badge-success">aktiv</span>
                                                <% } else { %>
                                                    <span class="badge badge-dark">inaktive</span>
                                                <% }    %>
                                            </td>
                                            <td class="text-center">
                                                <% if ( c.isFlatrate() ) {  %>
                                                    <span class="badge badge-success">Flatrate</span>
                                                <% } else {  %>
                                                    <span class="badge badge-info"><%= c.getCurrentPriceFactor() %> / <%= c.getMaxPriceFactor() %></span>
                                                <% }    %>
                                            </td>
                                            <td class="text-right">
                                                <% if ( c.isPayed() ) { %>
                                                    <span class="badge badge-success">bezahlt</span>
                                                <% } else if ( c.isPaymentDue() ) { %>
                                                    <span class="badge badge-danger">-<%= c.getOpenPaymentAmount() %>&nbsp;&euro;</span>
                                                <% } else {  %>
                                                    <span class="badge badge-danger">-<%= c.getOpenPaymentAmount() %>&nbsp;&euro;</span>
                                                <% }    %>
                                            </td>
                                            <td>
                                                <i class="fas fa-chevron-right"></i>
                                            </td>
                                        </tr>
                                    <% }    %>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    <% } else { %>
                        <p>
                            Keine Verträge vorhanden.
                        </p>
                    <% }    %>
                </div>
            </div>
        </div>
    </div>
</div>