<%=raw app.core.View.getTemplate( 'appointment-detail-nav', { a : a, activeTab : 'attendee' } ) %>
<% mStart = a.getMomentStart(); %>
<% mEnd = a.getMomentEnd(); %>
<% mDeadline = a.getMomentDeadline(); %>
<div class="row">
    <div class="col-sm-12">
        <div class="card">
            <div class="card-body">
                <% if ( a.hasStarted() ) {  %>

                    <% var attendeesAttended = a.getAttendeesAttended(); %>
                    <div class="row">
                        <div class="col">
                            <div class="appointment-detail-header">
                                <i class="far fa-thumbs-up"></i> <%= _lc( 'ATTENDED' ) %> (<%= attendeesAttended.length %>)
                            </div>
                            <div class="appointment-detail-content">
                                <% if ( attendeesAttended.length > 0 ) {    %>
                                <table class="table table-profiles">
                                    <tbody>
                                    <% for ( var aai = 0; aai < attendeesAttended.length; aai++ ) {  %>
                                        <%=raw app.core.View.getTemplate( 'appointment-detail-attendee-row', { a: a, at : attendeesAttended[ aai ], g : g } ) %>
                                    <% }    %>
                                    </tbody>
                                </table>
                                <% } else {   %>
                                    <%= _lc( 'NONE' ) %>
                                <% }    %>
                            </div>
                        </div>
                    </div>

                <% } else { %>

                    <% var attendeesAccepted = a.getAttendeesAccepted(); %>

                    <div class="row">
                        <div class="col">
                            <div class="appointment-detail-header">
                                <i class="far fa-thumbs-up"></i> <%= _lc( 'ACCEPTANCE' ) %> (<%= attendeesAccepted.length %>)
                            </div>
                            <div class="appointment-detail-content">
                                <% if ( attendeesAccepted.length > 0 ) {    %>
                                    <table class="table table-profiles">
                                        <tbody>
                                            <% for ( var aai = 0; aai < attendeesAccepted.length; aai++ ) {  %>
                                                <%=raw app.core.View.getTemplate( 'appointment-detail-attendee-row', { a: a, at : attendeesAccepted[ aai ], g : g } ) %>
                                            <% }    %>
                                        </tbody>
                                    </table>
                                <% } else {   %>

                                    <%= _lc( 'NONE' ) %>

                                <% }    %>
                            </div>
                        </div>
                    </div>
                    <% if ( 0 < a.getMaxAttendees() ) { %>

                        <% var attendeesWaiting = a.getWaitingList();   %>
                        <div class="row">
                            <div class="col">
                                <div class="appointment-detail-header">
                                    <i class="fas fa-hourglass-half"></i></i> <%= _lc( 'WAITINGLIST' ) %> (<%= attendeesWaiting.length %>)
                                </div>
                                <div class="appointment-detail-content">
                                    <% if ( attendeesWaiting.length > 0 ) {    %>
                                    <table class="table table-profiles">
                                        <tbody>
                                        <% for ( var awi = 0; awi < attendeesWaiting.length; awi++ ) {  %>
                                            <%=raw app.core.View.getTemplate( 'appointment-detail-attendee-waiting-row', { a: a, at : attendeesWaiting[ awi ], g : g, waitingPos : (awi + 1) } ) %>
                                        <% }    %>
                                        </tbody>
                                    </table>
                                    <% } else {    %>
                                        <%= _lc( 'NONE' ) %>
                                    <% }    %>
                                </div>
                            </div>
                        </div>
                    <% }    %>
                    <div class="row">
                        <div class="col">
                            <div class="appointment-detail-header">
                                <i class="far fa-thumbs-down"></i></i> Absagen (<%= a.getProfileIdsDeclined().length %>)
                            </div>
                            <% let attendeesDeclined = a.getAttendeesDeclined(); %>
                            <div class="appointment-detail-content">
                                <% if ( attendeesDeclined.length > 0 ) {    %>
                                <table class="table table-profiles">
                                    <tbody>
                                    <% for ( var adi = 0; adi < attendeesDeclined.length; adi++ ) {  %>
                                        <%=raw app.core.View.getTemplate( 'appointment-detail-attendee-row', { a: a, at : attendeesDeclined[ adi ], g : g } ) %>
                                    <% }    %>
                                    </tbody>
                                </table>
                                <% } else {    %>
                                    <%= _lc( 'NONE' ) %>
                                <% }    %>
                            </div>
                        </div>
                    </div>
                <% } %>
            </div>
            <div class="card-footer">
                <div class="row">
                    <div class="col">
                        <% if ( app.model.SessionUser.canAdministrateTeam( a.getTeamId() )  ) {    %>
                            <a href="#/appointment/edit/<%= a.getId() %>/attendee"
                               class="btn btn-primary">
                                <i class="fas fa-user-edit"></i>
                            </a>
                        <% }    %>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>