<% var currentProfile = app.model.SessionUser.getUserProfile(); %>
<% var mStart = a.getMomentStart(); %>
<% var mEnd = a.getMomentEnd(); %>
<% var mDeadline = a.getMomentDeadline(); %>
<% var mDeadlineReject = a.getMomentDeadlineReject(); %>
<% var btnClass = ''; %>
<% var group = app.model.SessionUser.getGroupById( a.getTeamId() ); %>
<% var categoryNames = a.getCategoryNames(); %>
<% var homeState = app.core.StateManager.getCurrentState(); %>
<% var multiple = ( true === currentProfile.hasMultipleChilds() ) ? '-multiple' : '' %>
<div class="appointment-item">
    <div data-type="appointment-short-info"
         data-appointment-id="<%= a.getId() %>"
         class="row">
        <div class="col-appointment-date">
            <div class="appointment-date-container">
                <div class="weekday">
                    <%= mStart.format( 'ddd' ) %>
                </div>
                <div class="day">
                    <%= mStart.format( 'DD' ) %>
                </div>
                <div class="month">
                    <%= mStart.format( 'MMM' ) %>
                </div>
            </div>
        </div>
        <div class="col-appointment-bar">
            <% if ( a.isCancelled() || a.isDeadlineOver() ) { %>
                <div class="appointment-bar appointment-bar-cancelled"></div>
            <% } else if ( a.isMaxAttendeesExceeded() ) {   %>
                <div class="appointment-bar appointment-bar-waiting"></div>
            <% }    %>
        </div>
        <div class="col col-subject">
                <div class="appointment-category">
                    <% if ( categoryNames ) {    %>
                        <%= categoryNames %>
                        <% if ( false === a.isVisible() ) { %>
                            &nbsp;<i class="fas fa-eye-slash"></i>
                        <% }    %>
                    <% } else { %>
                        <%= _lc( 'NO_COURSE_CATEGORY' ) %>
                    <% }    %>
                </div>
            <div class="appointment-subject">
                <%= a.getSubject() %>
                <% if ( a.isDraft() ) { %>
                    <span class="badge badge-warning">Entwurf</span>
                <% } %>
            </div>
            <div class="appointment-datetime">
                <i class="far fa-clock"></i> <%= mStart.format( 'HH:mm' ) %> - <%= mEnd.format( 'HH:mm' ) %> | <i class="far fa-thumbs-up"></i> <%= a.getNumAttendeesAccepted() %> <% if ( 0 < a.getMaxAttendees() ) {    %> | <%= a.getMaxAttendees() -  a.getNumAttendeesAccepted() %> verfügbar <% }  %> | <%= group ? group.getName() : '' %>
            </div>
        </div>
        <div data-type="appointment-rsvp-container"
             data-appointment-id="<%= a.getId() %>"
             class="col-appointment-response">

            <div class="container-rsvp-icon">

                <% if ( a.isDraft() ) { %>

                    <section data-type="section-rsvp-draft-icon">
                        <div class="rsvp-draft-icon">
                            <i class="fas fa-pencil-alt"></i>
                        </div>
                    </section>

                <% } else { %>

                    <section data-type="section-rsvp-icon-unchecked"
                             style="display: <%= ( a.hasProfileIdStatus( currentProfile.getId(), "accepted" ) || a.hasProfileIdStatus( currentProfile.getId(), "waiting" ) ) ? 'none' : 'block' %>">
                        <button type="button"
                                data-type="rsvp-button-accept<%= multiple %>"
                                data-appointment-id="<%= a.getId() %>"
                                class="btn btn-rsvp-not-selected btn-circle btn-xl">
                            <i class="fas fa-thumbs-up"></i>
                        </button>
                    </section>

                    <section data-type="section-rsvp-icon-loading"
                             style="display: none">
                        <div class="rsvp-loading-icon">
                            <i class="fas fa-circle-notch fa-spin"></i>
                        </div>
                    </section>

                    <section data-type="section-rsvp-icon-accepted"
                             style="display: <%= a.hasProfileIdStatus( currentProfile.getId(), "accepted" ) ? 'block' : 'none' %>">
                        <div style="position:relative; width:52px; height:40px;">
                            <div data-type="rsvp-button-recall<%= multiple %>"
                                 data-appointment-id="<%= a.getId() %>"
                                 style="position: absolute;width:40px; height:40px;top:0;right:0">
                                <svg class="rsvp-checkmark"
                                     xmlns="http://www.w3.org/2000/svg"
                                     viewBox="0 0 52 52">
                                    <circle class="rsvp-checkmark__circle" cx="26" cy="26" r="25" fill="none"/>
                                    <path class="rsvp-checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
                                </svg>
                            </div>
                        </div>
                    </section>

                    <section data-type="section-rsvp-icon-waiting"
                             style="display: <%= a.hasProfileIdStatus( currentProfile.getId(), "waiting" ) ? 'block' : 'none' %>">
                        <div style="position:relative; width:52px; height:40px;">
                            <div data-type="rsvp-button-recall<%= multiple %>"
                                 data-appointment-id="<%= a.getId() %>"
                                 style="position: absolute;width:40px; height:40px;top:0;right:0">
                                <svg class="rsvp-checkmark rsvp-chcekmark-waiting"
                                     xmlns="http://www.w3.org/2000/svg"
                                     viewBox="0 0 52 52">
                                    <circle class="rsvp-checkmark__circle rsvp-checkmark__circle-waiting" cx="26" cy="26" r="25" fill="none"/>
                                    <path class="rsvp-checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
                                </svg>
                            </div>
                        </div>
                    </section>

                <% }    %>

            </div>
        </div>
    </div>
    <div class="collapse appointment-collapse-container"
         data-type="appointment-detail-container"
         data-appointment-id="<%= a.getId() %>">
        <div class="row">
            <div class="col">
                <% if ( a.isCancelled() ) { %>
                    <div class="appointment-collapse-bar appointment-collapse-bar-cancelled">
                        <%= _lc( 'APPOINTMENT_HAS_BEEN_CANCELLED' ) %>
                    </div>
                <% } else if ( !a.hasStarted() && a.isDeadlineOver() ) {   %>
                    <div class="appointment-collapse-bar appointment-collapse-bar-deadlineover">
                        <%= _lc( 'DEADLINE_IS_OVER' ) %>
                    </div>
                <% } else if ( a.isMaxAttendeesExceeded() ) {   %>
                    <% var waitingPosition = a.getWaitingPositionForProfileId( app.model.SessionUser.getProfileId() ); %>
                    <div class="appointment-collapse-bar appointment-collapse-bar-waiting">
                        <% if ( waitingPosition > 0 ) { %>
                            <%= _lc( 'WAITING_LIST_USER_POSITION', [ waitingPosition ] ) %>
                        <% } else { %>
                            <%= _lc( 'BOOKED_OUT_ONLY_WAITING_LIST_AVAILABLE' ) %>
                        <% }    %>
                    </div>
                <% } else {   %>
                    <hr style="margin-top: 0" />
                <% }    %>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <table class="table table-borderless">
                    <tr>
                        <td>
                            <%= _lc( 'DEADLINEREJECTTIME' ) %>
                        </td>
                        <td>
                            <%= mDeadlineReject.format( 'DD.MMM' ) %> <%= mDeadlineReject.format( 'HH:mm' ) %> Uhr
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <%= _lc( 'DEADLINETIME' ) %>
                        </td>
                        <td>
                            <%= mDeadline.format( 'DD.MMM' ) %> <%= mDeadline.format( 'HH:mm' ) %> Uhr
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Abrechnungsfaktor
                        </td>
                        <td>
                            <%= ('' + a.getPriceFactor().toFixed(2)).replace( '.', ',' ) %>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <%= _lc( 'LOCATION' ) %>
                        </td>
                        <td>
                            <%=raw a.getLocation() ? a.getLocation() : ( '<i>' + _lc( 'APPOINTMENT_NO_LOCATION' ) + '</i>' )  %>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <%= _lc( 'DETAILS' ) %>
                        </td>
                        <td>
                            <%=raw a.getComment() ? app.util.Helper.crop( app.util.Helper.nl2br( a.getComment() ), 100 ) : ( '<i>' + _lc( 'APPOINTMENT_NO_COMMENT' ) + '</i>' ) %>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="col">
                <table class="table table-borderless">
                    <tr>
                        <td>
                            <%= _lc( 'ACCEPTANCE' ) %>&nbsp;(<%= a.getNumAttendeesAccepted() %>)
                        </td>
                        <% let ad, m, cp; %>
                        <% ad = a.getAttendeeDataByStatus( "accepted" ); %>
                        <td>
                            <% if ( ad.length > 0 ) {   %>

                                <% for ( let ai = 0; ai < ad.length; ai++ ) { %>
                                    <%= ai > 0 ? ' - ' : '' %>
                                    <% m = homeState.getMemberByGroupAndProfileId( a.getTeamId(), ad[ ai ].profile_id ); %>
                                    <% cp = m ? m.getChildProfileById( ad[ ai ].profile_child_id ) : null; %>

                                    <% if ( m ) {   %>
                                        <%= m.getName( a.getTeamId() ) %>
                                        <% if ( cp ) {  %>
                                            [<%=raw m.getChildProfileHtmlTagById( cp.id ) %>]
                                        <% }    %>
                                    <% } else { %>
                                        <i>Gelöscht</i>
                                    <% }    %>
                                <% }    %>
                            <% }    %>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <%= _lc( 'WAITINGLIST' ) %>&nbsp;(<%= a.hasWaitingList() ? a.getNumAttendeesWaiting() : '0' %>)
                        </td>
                        <% ad = a.getAttendeeDataByStatus( "waiting" ); %>
                        <td>
                            <% if ( ad.length > 0 ) {   %>
                                <% for ( let ai = 0; ai < ad.length; ai++ ) { %>
                                    <%= ai > 0 ? ' - ' : '' %>
                                    <% m = homeState.getMemberByGroupAndProfileId( a.getTeamId(), ad[ ai ].profile_id ); %>
                                    <% cp = m ? m.getChildProfileById( ad[ ai ].profile_child_id ) : null; %>

                                    <% if ( m ) {   %>
                                        <%= m.getName( a.getTeamId() ) %>
                                        <% if ( cp ) {  %>
                                            [<%=raw m.getChildProfileHtmlTagById( cp.id ) %>]
                                        <% }    %>
                                    <% } else { %>
                                        <i>Gelöscht</i>
                                    <% }    %>
                                <% }    %>
                            <% }    %>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Absagen&nbsp;(<%= a.getProfileIdsDeclined().length %>)
                        </td>
                        <% ad = a.getAttendeeDataByStatus( "declined" ); %>
                        <td>
                            <% if ( ad.length > 0 ) {   %>
                                <% for ( let ai = 0; ai < ad.length; ai++ ) { %>
                                    <%= ai > 0 ? ' - ' : '' %>
                                    <% m = homeState.getMemberByGroupAndProfileId( a.getTeamId(), ad[ ai ].profile_id ); %>
                                    <% cp = m ? m.getChildProfileById( ad[ ai ].profile_child_id ) : null; %>
                                    <% if ( m ) {   %>
                                        <%= m.getName( a.getTeamId() ) %>
                                        <% if ( cp ) {  %>
                                            [<%=raw m.getChildProfileHtmlTagById( cp.id ) %>]
                                        <% }    %>
                                    <% } else { %>
                                        <i>Gelöscht</i>
                                    <% }    %>
                                <% }    %>
                            <% }    %>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <% if ( false === a.isDraft() ) { %>
                    <a href="#/appointment/<%= a.getId() %>"
                       class="btn btn-primary"><i class="fas fa-search"></i></a>
                    <a href="#/appointment/<%= a.getId() %>/attendee"
                       class="btn btn-primary"><i class="fas fa-users"></i></a>
                    <a href="#/appointment/<%= a.getId() %>/chat"
                       class="btn btn-primary"><i class="far fa-comments"></i></a>
                <% }    %>
                <% if ( app.model.SessionUser.canAdministrateTeam( a.getTeamId() )  ) {    %>

                    <% if ( a.isDraft() ) { %>

                        <button data-type="btn-appoint-publish"
                                data-appointment-id="<%= a.getId() %>"
                                style="margin-left: 4px"
                                class="float-right btn btn-primary">
                            <%= _lc( 'BTN_PUBLISH_APPOINTMENT' ) %>
                        </button>

                        <button href="#/appointment/edit/<%= a.getId() %>/attendee"
                                data-type="btn-appointment-edit-attendee"
                                data-appointment-id="<%= a.getId() %>"
                           style="margin-left: 4px"
                           class="float-right btn btn-primary">
                            <i class="fas fa-user-edit"></i>
                        </button>

                        <button
                           style="margin-left: 4px"
                           data-type="btn-appointment-edit"
                           data-appointment-id="<%= a.getId() %>"
                           class="float-right btn btn-primary">
                            <i class="far fa-edit"></i>
                        </button>

                    <% }    %>

                    <% if ( a.isCancelled() || a.isDraft() || a.isOver() )   {   %>

                        <button data-type="btn-appoint-delete"
                                data-appointment-id="<%= a.getId() %>"
                                class="float-right btn btn-danger">
                            <i class="far fa-trash-alt"></i>
                        </button>

                    <% } else { %>

                        <button data-type="btn-appoint-cancel"
                                data-appointment-id="<%= a.getId() %>"
                                class="float-right btn btn-danger"><i class="far fa-window-close"></i></button>

                    <% }    %>

                <% }    %>
            </div>
        </div>
    </div>
</div>