<%=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>
                    <strong>Details</strong>
                </div>
                <div class="table-responsive">
                    <table class="table table-sm">
                        <tbody>
                        <tr>
                            <td style="border-top: none">ID</td>
                            <td style="border-top: none"><%= c.getId() %></td>
                        </tr>
                        <tr>
                            <td>Gruppe</td>
                            <td><%= c.getContracteeData( 'groupName', '' ) %></td>
                        </tr>
                        <tr>
                            <td>Vertragsgeber</td>
                            <td>
                                <%= c.getContracteeData( 'name' ) %><br />
                                <%= c.getContracteeData( 'street' ) %><br />
                                <%= c.getContracteeData( 'zip_code' ) %> <%= c.getContracteeData( 'city' ) %><br />
                                <%= c.getContracteeCountry() %>
                            </td>
                        </tr>
                        <tr>
                            <td>Vertragsnehmer</td>
                            <td>
                                <%= c.getProfileData( 'first_name' ) %> <%= c.getProfileData( 'last_name' ) %><br />
                                <%= c.getProfileData( 'street' ) %><br />
                                <%= c.getProfileData( 'zip_code' ) %> <%= c.getProfileData( 'city' ) %><br />
                                <%= c.getProfileCountry() %>
                            </td>
                        </tr>
                        <tr>
                            <td>Name</td>
                            <td><%= c.getName() %></td>
                        </tr>
                        <tr>
                            <td>Kontingent</td>
                            <td>
                                <% if ( c.isFlatrate() ) {  %>
                                    <span class="badge badge-success">Flatrate</span>
                                <% } else {  %>
                                    <span class="badge badge-info"><%= c.getCurrentPriceFactor() %> / <%= c.getMaxPriceFactor() %></span>
                                <% }    %>
                            </td>
                        </tr>
                        <tr>
                            <td>Preis</td>
                            <td><%= c.getPrice() %>&nbsp;<%= c.getCurrency() %></td>
                        </tr>
                        <tr>
                            <td>Bezahlt</td>
                            <td><%= c.getPricePayed() %>&nbsp;<%= c.getCurrency() %></td>
                        </tr>
                        <tr>
                            <td>Offener Betrag</td>
                            <td>
                                <%= c.getOpenPaymentAmount() > 0 ? '-' : '' %><%= c.getOpenPaymentAmount() %>&nbsp;<%= c.getCurrency() %>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Bezahlinformationen
                            </td>
                            <td>
                                <% if ( c.isPayed() ) { %>
                                    <span class="badge badge-success">bezahlt</span>
                                <% } else if ( c.isPaymentDue() ) { %>
                                    <span class="badge badge-danger">Bezahlfrist überschritten. Bitte überweisen.</span>
                                <% } else {  %>
                                    <span class="badge badge-info">Bitte bezahlen Sie den offenen Betrag bis zum <%= c.getMomentOfPaymentDue().format( 'DD.MM.YYYY' ) %>.</span>
                                <% }    %>
                            </td>
                        </tr>
                        <tr>
                            <td>Laufzeit</td>
                            <td><%= c.getMomentOfStart().format( 'DD.MM.YYYY' ) %> - <%= c.getMomentOfEnd().format( 'DD.MM.YYYY' ) %></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div style="margin-top: 12px">
                    <strong>Zugewiesene Termine</strong>
                </div>
                <% if ( ca.length > 0 ) {   %>
                    <div class="table-responsive">
                        <table class="table table-sm">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>Name</th>
                                <th>Datum</th>
                                <th>Uhrzeit</th>
                                <th>Ort</th>
                            </tr>
                            </thead>
                            <tbody>
                            <% for ( var cai = 0; cai < ca.length; cai++ ) {    %>
                                <tr>
                                    <td>
                                        <%= ca[ cai ].getId() %>
                                    </td>
                                    <td>
                                        <%= ca[ cai ].getSubject() %>
                                    </td>
                                    <td>
                                        <%= ca[ cai ].getMomentStart().format( 'DD.MM.YYYY' ) %>
                                    </td>
                                    <td>
                                        <%= ca[ cai ].getMomentStart().format( 'HH:mm [Uhr]' ) %> - <%= ca[ cai ].getMomentEnd().format( 'HH:mm [Uhr]' ) %>
                                    </td>
                                    <td>
                                        <%= ca[ cai ].getLocation() %>
                                    </td>
                                </tr>
                            <% }    %>
                            </tbody>
                        </table>
                    </div>
                <% } else { %>
                    <p>
                        Keine Zuweisungen.
                    </p>
                <% }    %>
            </div>
            <div class="card-footer">
                <div class="row">
                    <div class="col">
                        <a href="#/configuration/contract" class="btn btn-sm btn-primary">
                            <i class="fas fa-chevron-left"></i>&nbsp;Zur Vertragsübersicht
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>