<%=raw app.core.View.getTemplate( 'appointment-detail-nav', { a : a, activeTab : 'details' } ) %>
<% var mStart = a.getMomentStart(); %>
<% var mEnd = a.getMomentEnd(); %>
<% var mDeadline = a.getMomentDeadline(); %>
<% var mDeadlineReject = a.getMomentDeadlineReject(); %>
<% var currentUser = app.model.SessionUser.getUserProfile(); %>
<% var categoryNames = a.getCategoryNames(); %>
<div class="row">
    <div class="col-sm-12">
        <div class="card">
            <div class="card-body">
                <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>
                        <% } %>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <div class="appointment-detail-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-detail-appointment-name">
                            <%= a.getSubject() %>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <div class="appointment-detail-header">
                            <i class="far fa-clock"></i> <%= _lc( 'TIMES' ) %>
                        </div>
                        <div class="appointment-detail-content">
                            <table class="table table-borderless">
                                <tr>
                                    <th><%= _lc( 'STARTTIME' ) %></th>
                                    <td>
                                        <%= mStart.format( 'dd, DD.MMM.YYYY HH:mm [Uhr]' ) %>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        <%= _lc( 'ENDTIME' ) %>
                                    </th>
                                    <td>
                                        <%= mEnd.format( 'dd, DD.MMM.YYYY HH:mm [Uhr]' ) %>
                                    </td>
                                </tr>
                                <tr>
                                    <th><%= _lc( 'DEADLINEREJECTTIME' ) %></th>
                                    <td>
                                        <%= mDeadlineReject.format( 'dd, DD.MMM.YYYY HH:mm [Uhr]' ) %>
                                    </td>
                                </tr>
                                <tr>
                                    <th><%= _lc( 'DEADLINETIME' ) %></th>
                                    <td>
                                        <%= mDeadline.format( 'dd, DD.MMM.YYYY HH:mm [Uhr]' ) %>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <hr />
                <div class="row">
                    <div class="col">
                        <div class="appointment-detail-header">
                            <i class="far fa-calendar-check"></i> <%= _lc( 'FEEDBACKS' ) %>
                        </div>
                        <div class="appointment-detail-content">
                            <table class="table table-borderless">
                                <tr>
                                    <th><%= _lc( 'ACCEPTANCE' ) %></th>
                                    <td>
                                        <%= a.getNumAttendeesAccepted() %> <% if ( 0 < a.getMaxAttendees() ) {    %> von <%= a.getMaxAttendees() %> <% } %>
                                    </td>
                                </tr>
                                <% if ( 0 < a.getMaxAttendees() ) { %>
                                    <tr>
                                        <th>
                                            <%= _lc( 'WAITINGLIST' ) %>
                                        </th>
                                        <td>
                                            <%= a.getNumAttendeesWaiting() %>
                                        </td>
                                    </tr>
                                <% }    %>
                                <% if ( 0 < a.getMaxAttendees() ) { %>
                                    <tr>
                                        <th><%= _lc( 'FREE_REMAINING' ) %></th>
                                        <td>
                                            <%= a.getMaxAttendees() - a.getNumAttendeesAccepted() %>
                                        </td>
                                    </tr>
                                <% }    %>
                            </table>
                        </div>
                    </div>
                </div>
                <hr />
                <div class="row">
                    <div class="col">
                        <div class="appointment-detail-header">
                            <i class="fas fa-map-marker-alt"></i> <%= _lc( 'LOCATION' ) %>
                        </div>
                        <div class="appointment-detail-content">
                            <%= a.getLocation() ? a.getLocation() : _lc( 'NO_LOCATION_FOUND' ) %>
                            <% if ( a.getLocation() ) { %>
                                <br />
                                <a class="btn btn-sm btn-primary"
                                   href="http://maps.google.co.in/maps?q=<%= encodeURI( a.getLocation() ) %>" target="_blank">
                                    <i class="fas fa-map-marker-alt"></i>&nbsp;Google Maps
                                </a>
                            <% }    %>

                        </div>
                    </div>
                </div>
                <hr />
                <div class="row">
                    <div class="col">
                        <div class="appointment-detail-header">
                            <i class="fas fa-info-circle"></i> <%= _lc( 'DETAILS' ) %>
                        </div>
                        <div class="appointment-detail-content">
                            <%=raw a.getComment() ? app.util.Helper.nl2br( a.getComment() ) : _lc( 'NO_DESCRIPTION_AVAILABLE' ) %>
                        </div>
                    </div>
                </div>
                <hr />
                <div class="row">
                    <div class="col">
                        <div class="appointment-detail-header">
                            <i class="fa fa-credit-card" aria-hidden="true"></i> Abrechnungsfaktor
                        </div>
                        <div class="appointment-detail-content">
                            <%= ('' + a.getPriceFactor().toFixed(2)).replace( '.', ',' ) %>
                        </div>
                    </div>
                </div>
                <hr />
                <div class="row">
                    <div class="col">
                        <div class="appointment-detail-header">
                            <i class="fas fa-reply"></i> <%= _lc( 'PROFILE_FEEDBACK' ) %>
                        </div>
                        <div class="appointment-detail-content">

                            <div data-type="appointment-rsvp-container"
                                 data-appointment-id="<%= a.getId() %>">

                                <div class="container-rsvp-icon">
                                    <section data-type="section-rsvp-icon-unchecked"
                                             style="display: <%= ( a.hasProfileIdAccepted( currentUser.getId() ) || a.isProfileIdWaiting( currentUser.getId() ) ) ? 'none' : 'block' %>">
                                        <button type="button"
                                                data-type="rsvp-button-accept"
                                                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.hasProfileIdAccepted( currentUser.getId() ) ? 'block' : 'none' %>">
                                        <div style="position:relative; width:52px; height:40px;">
                                            <div data-type="rsvp-button-recall"
                                                 data-appointment-id="<%= a.getId() %>"
                                                 style="position: absolute;width:40px; height:40px;top:0;right:0; cursor:pointer;">
                                                <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.isProfileIdWaiting( currentUser.getId() ) ? 'block' : 'none' %>">
                                        <div style="position:relative; width:52px; height:40px;">
                                            <div data-type="rsvp-button-recall"
                                                 data-appointment-id="<%= a.getId() %>"
                                                 style="position: absolute;width:40px; height:40px;top:0;right:0; cursor:pointer;">
                                                <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 data-type="appointment-rsvp-container"
                                 class="">
                                <div class="btn-group" role="group">
                                    <% var btnClass = ''; %>
                                    <% if ( a.hasProfileIdAccepted( currentUser.getId() ) ) { %>
                                        <%  btnClass = 'btn-accepted'; %>
                                    <% } else if ( a.isProfileIdWaiting( currentUser.getId() ) ) {   %>
                                        <% btnClass= 'btn-waiting'; %>
                                    <% } else {   %>
                                        <% btnClass= 'btn-not-selected'; %>
                                    <% }    %>
                                    <button type="button"
                                            data-type="rsvp-button"
                                            data-status="accepted"
                                            data-appointment-id="<%= a.getId() %>"
                                            <%= ( a.isCancelled() || a.hasStarted() || a.isDeadlineOver() ) ? 'disabled="disabled"' : '' %>
                                            class="btn <%= btnClass %>">
                                        <i class="fas fa-thumbs-up"></i>
                                    </button>
                                    <button type="button"
                                            data-type="rsvp-button"
                                            data-status="declined"
                                            <%= ( a.isCancelled() || a.hasStarted() || a.isDeadlineOver() ) ? 'disabled="disabled"' : '' %>
                                            data-appointment-id="<%= a.getId() %>"
                                            class="btn <%= a.hasProfileIdDeclined( currentUser.getId() ) ? 'btn-declined' : 'btn-not-selected' %>">
                                        <i class="fas fa-thumbs-down"></i>
                                    </button>
                                </div>
                            </div>
                            -->
                        </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() %>"
                               class="btn btn-primary"><i class="far fa-edit"></i></a>

                            <% if ( true === a.isCancelled() )   {   %>

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

                            <% } else { %>

                                <% if ( false === a.isCancelled() && false === a.isOver() ) {   %>
                                    <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>
    </div>
</div>