<%
    var isMatch = data.appointment.subject ? false : true;
    var isOver = ( data.appointment.starttime < TB.Utils.getUnixTimestamp() );
%>
<div class="row">
    <div class="col-md-12">
        <% if ( isMatch ) { %>

        <h3><%= data.appointment.home %> : <%= data.appointment.guest %></h3>

        <%  } else {    %>

        <h3><%= data.appointment.subject%></h3>

        <% }    %>
    </div>
</div>
<div class="row">
    <div class="col-md-6 col-sm-12">

        <% if ( isMatch ) { %>

        <div class="panel panel-default">
            <table class="table table-bordered table-appointment-detail">
                <tr>
                    <td>Beginn</td>
                    <td>
                        <%= moment( new Date( data.appointment.starttime * 1000 ) ).format( 'dddd' ) %>, <%= TB.Utils.getDatetimeStringFromUnixTimestamp( data.appointment.starttime ) %>&nbsp;
                        <span class="dropdown">
                        <button type="button"
                                class="btn btn-sm btn-primary dropdown-toggle"
                                data-toggle="dropdown">
                            <span class="glyphicon glyphicon-calendar"></span>&nbsp;<span class="caret"></span>
                        </button>
                        <ul id="btn_add_to_calendar"
                            class="dropdown-menu add-to-calendar pull-right"
                            role="menu">
                            <li>
                                <%= data.addToCalendarLinks['google'] %>
                            </li>
                            <li>
                                <%= data.addToCalendarLinks['yahoo'] %>
                            </li>
                            <li>
                                <%= data.addToCalendarLinks['ical'] %>
                            </li>
                            <li>
                                <%= data.addToCalendarLinks['outlook'] %>
                            </li>
                        </ul>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td>Dauer</td>
                    <td><%= TB.GUI.getValue( data.appointment.duration ) %> Minuten</td>
                </tr>
                <tr>
                    <td>ID Nummer</td>
                    <td><%= TB.GUI.getValue( data.appointment.id_nr, '---' ) %></td>
                </tr>
                <tr>
                    <td>Ort</td>
                    <td>
                        <%= TB.GUI.getValue( data.appointment.location, '---' ) %>
                        <% if ( data.appointment.location && 0 < data.appointment.location.length ) { %>
                        <a class="btn btn-sm btn-primary"
                                 href="http://maps.google.co.in/maps?q=<%= encodeURI( data.appointment.location ) %>" target="_blank">
                            <span class="glyphicon glyphicon-map-marker"></span>
                        </a>
                        <% }    %>
                    </td>
                </tr>
                <tr>
                    <td>Kommentar</td>
                    <td><%= (TB.GUI.getValue( data.appointment.comment, '---' )).replace( /\n/g,"<br>" ) %></td>
                </tr>
            </table>

        </div>

        <%  } else {    %>


        <div class="panel panel-default">
            <table class="table table-bordered table-appointment-detail">
                <tr>
                    <td>Beginn</td>
                    <td>
                        <%= moment( new Date( data.appointment.starttime * 1000 ) ).format( 'dddd' ) %>, <%= TB.Utils.getDatetimeStringFromUnixTimestamp( data.appointment.starttime ) %>&nbsp;
                        <span class="dropdown">
                        <button type="button"
                                class="btn btn-sm btn-primary dropdown-toggle"
                                data-toggle="dropdown">
                            <span class="glyphicon glyphicon-calendar"></span>&nbsp;<span class="caret"></span>
                        </button>
                        <ul id="btn_add_to_calendar"
                            class="dropdown-menu add-to-calendar pull-right"
                            role="menu">
                            <li>
                                <%= data.addToCalendarLinks['google'] %>
                            </li>
                            <li>
                                <%= data.addToCalendarLinks['yahoo'] %>
                            </li>
                            <li>
                                <%= data.addToCalendarLinks['ical'] %>
                            </li>
                            <li>
                                <%= data.addToCalendarLinks['outlook'] %>
                            </li>
                        </ul>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td>Dauer</td>
                    <td><%= TB.GUI.getValue( data.appointment.duration ) %> Minuten</td>
                </tr>
                <tr>
                    <td>Ort</td>
                    <td>
                        <%= TB.GUI.getValue( data.appointment.location, '---' ) %>
                        <% if ( data.appointment.location && 0 < data.appointment.location.length ) { %>
                        <a class="btn btn-sm btn-primary"
                           href="http://maps.google.co.in/maps?q=<%= encodeURI( data.appointment.location ) %>" target="_blank">
                            <span class="glyphicon glyphicon-map-marker"></span>
                        </a>
                        <% }    %>
                    </td>
                </tr>
                <tr>
                    <td class="valign-top">Kommentar</td>
                    <td><%= (TB.GUI.getValue( data.appointment.comment, '---' )).replace( /\n/g,"<br>" ) %></td>
                </tr>
            </table>

        </div>

        <% }    %>

        <div class="row">
            <% if ( !isOver && TB.Client.can( TB.ACL.RIGHTS.APPOINTMENT_DELETE ) ) {     %>
            <div class="col-md-6 button-container">
                <button role="button"
                        id="btn_delete_appointment"
                        class="btn btn-primary btn-block">
                    Termin löschen
                </button>
            </div>
            <% }  %>
            <% if ( !isOver && TB.Client.can( TB.ACL.RIGHTS.APPOINTMENT_UPDATE ) ) {     %>
            <div class="col-md-6 button-container">
                <button role="button"
                        id="btn_edit_appointment"
                        class="btn btn-primary btn-block">
                    Termin bearbeiten
                </button>
            </div>
            <%  }   %>
        </div>

    </div>

    <div class="col-md-6 col-sm-12">
        <%
            var ownChoice = {
                status: null,
                comment: ''
            };

            $.each( data.attendees, function( i, v ) {
            if ( v.profile_id == TB.Client.profile.id ) {
                    ownChoice = v;
                    return false;
                }
            });

            var unixTimeFeedback = data.appointment.starttime - data.appointment.feedback_deadline * 60,
                unixTimeNow = ~~( (new Date()).getTime() / 1000 );

        %>

        <div class="panel panel-default">
            <% if ( unixTimeNow < unixTimeFeedback ) {  %>
                <div class="panel-heading" style="background-color: white">
                    <strong>Bist Du dabei?</strong>
                </div>
                <div class="panel-body">
                    <p>
                        Zusagefrist bis <%= moment( new Date( ( data.appointment.starttime - data.appointment.feedback_deadline * 60 ) * 1000 ) ).format( 'DD.MM.YY [um] H:mm [Uhr]' ) %>.
                    </p>
                    <div id="form_appointment_attendance" class="form-group btn-group btn-group-justified" data-toggle="buttons">
                        <label class="btn <%= ( ownChoice.status == 'accepted' ) ? 'btn-success active' : 'btn-disabled' %> <%= ( isOver || false === TB.Client.can( TB.ACL.RIGHTS.APPOINTMENT_SETATTENDANCESTATUS )  ) ? 'disabled' : '' %>"
                               data-label-type="accept" data-appointment-id="<%= data.appointment.id %>">
                            <input type="radio" name="status" value="accepted" id="status_accepted" autocomplete="off"
                            <%= ( ownChoice.status == 'accepted' ) ? 'checked="checked"' : '' %> />
                            <span class="glyphicon glyphicon-thumbs-up"></span>
                        </label>
                        <label class="btn <%= ( ownChoice.status == 'declined' ) ? 'btn-danger active' : 'btn-disabled' %> <%= ( isOver || false === TB.Client.can( TB.ACL.RIGHTS.APPOINTMENT_SETATTENDANCESTATUS ) ) ? 'disabled' : '' %>"
                               data-label-type="decline" data-appointment-id="<%= data.appointment.id %>">
                            <input type="radio" name="status" value="declined" id="status_declined" autocomplete="off"
                            <%= ( ownChoice.status == 'declined' ) ? 'checked="checked"' : '' %> />
                            <span class="glyphicon glyphicon-thumbs-down"></span>
                        </label>
                    </div>

                    <div class="input-group">
                        <input type="text"
                               id="comment"
                               name="comment"
                               placeholder="Dein Kommentar"
                               class="form-control"
                               value="<%= ownChoice.comment %>"
                        <%= ( data.canSetStatus && TB.Client.can( TB.ACL.RIGHTS.APPOINTMENT_SETATTENDANCESTATUS ) ) ? '' : 'disabled="disabled"' %>
                        />
                        <span class="input-group-btn">
                            <button role="button"
                                    id="btn_set_attendee_status"
                                    data-appointment-id="<%= data.appointment.id %>"
                                    class="btn btn-primary <%= ( isOver || false === TB.Client.can( TB.ACL.RIGHTS.APPOINTMENT_SETATTENDANCESTATUS ) ) ? 'disabled' : '' %>">
                                <span class="glyphicon glyphicon-floppy-disk"></span>
                            </button>
                        </span>
                    </div>

                </div>
            <% } else { %>

                <div class="panel-heading" style="background-color: white">
                    <strong>Zusagefrist abgelaufen!</strong>
                </div>
                <div class="panel-body">
                    <p>
                        <%= data.appointment.feedback_deadline_notice %>
                    </p>
                </div>

            <% }    %>
        </div>


    </div>
</div>

<hr />

<%
    var numAccepted = 0,
        numDeclined = 0,
        numPending = 0,
        numTotal = data.profiles.length,
        d = data;

    $.each( data.attendees, function( i, v ) {
        switch( v.status ) {
            case 'accepted':
                numAccepted++;
                break;

            case 'declined':
                numDeclined++;
                break;
        }
    } );

    numPending = data.profiles.length - numAccepted - numDeclined;

    function getProfileDisplayNameById( id ) {
        var dn = TB._( 'Unbekannt' );
        $.each( d.profiles, function( i, v ) {
            if ( v.id == id ) {
                dn = v.name;
                return false;
            }
        });
        return dn;
    }
%>

<div class="row">
    <div class="col-md-12">
        <h4>Zusagen <span class="label label-success"><%= data.listAccepted.length %></span></h4>
    </div>
</div>

<div class="row">
    <% if( data.listAccepted && data.listAccepted.length > 0 ) { %>

        <% for ( var i = 0; i < data.listAccepted.length; i++ ) { %>

            <div class="col-md-6 col-sm-12 no-extra-bottom-margin">
                <div class="panel panel-default">
                    <div class="panel-body profile-list">
                        <div class="pull-left" style="position: relative">
                            <a href="<%= TB.Controller.getUrl( 'Player', 'index', { profile_id : data.listAccepted[i].id } ) %>">
                                <img src="<%= TB.GUI.getProfilePicUrl( data.listAccepted[i] ) %>"
                                     class="img-responsive img-circle img-thumbnail profile-pic-size-list">
                            </a>
                            <span class="badge badge-success attendee-iterator"><%= (i+1) %></span>
                        </div>
                        <div class="profile-list-body">
                            <a href="<%= TB.Controller.getUrl( 'Player', 'index', { profile_id : data.listAccepted[i].id } ) %>"
                               class="profile-list-name">
                                <%= TB.GUI.playerName( data.listAccepted[i] ) %>
                            </a>&nbsp;<small class="faded pull-right"><%= TB.Utils.getDatetimeStringFromUnixTimestampShortYear( ( data.listAccepted[i].last_accepted_ms == null ) ? data.listAccepted[i].last_update : data.listAccepted[i].last_accepted_ms/1000 )%></small><br />
                            <i class="glyphicon glyphicon-comment comment <%= '---' == TB.GUI.getValue( data.listAccepted[i].comment, '---' ) ? 'faded' : '' %>"></i>&nbsp;<i class="comment <%= '---' == TB.GUI.getValue( data.listAccepted[i].comment, '---' ) ? 'faded' : '' %>">
                                <%= '---' != TB.GUI.getValue( data.listAccepted[i].comment, '---' ) ? '&quot;' : '' %><%= TB.GUI.getValue( data.listAccepted[i].comment, '---' ) %><%= '---' != TB.GUI.getValue( data.listAccepted[i].comment, '---' ) ? '&quot;' : '' %>
                            </i>
                        </div>
                    </div>
                </div>
            </div>

        <% }    %>

    <% } else {     %>

        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-body">
                    Keine
                </div>
            </div>
        </div>

    <% }    %>
</div>

<div class="row">
    <div class="col-md-12">
        <h4>Absagen <span class="label label-danger"><%= data.listDeclined.length %></span></h4>
    </div>
</div>

<div class="row">
    <% if( data.listDeclined && data.listDeclined.length > 0 ) { %>

        <% for ( var i = 0; i < data.listDeclined.length; i++ ) { %>

        <div class="col-md-6 col-sm-12 no-extra-bottom-margin">
            <div class="panel panel-default">
                <div class="panel-body profile-list">
                    <div class="pull-left">
                        <img src="<%= TB.GUI.getProfilePicUrl( data.listDeclined[i] ) %>"
                             class="img-responsive img-circle img-thumbnail profile-pic-size-list">
                    </div>
                    <div class="profile-list-body">
                        <a href="<%= TB.Controller.getUrl( 'Player', 'index', { profile_id : data.listDeclined[i].id } ) %>"
                           class="profile-list-name">
                            <%= TB.GUI.playerName( data.listDeclined[i] ) %>
                        </a>&nbsp;<small class="faded pull-right"><%= TB.Utils.getDatetimeStringFromUnixTimestampShortYear( data.listDeclined[i].last_update )%></small><br />
                        <i class="glyphicon glyphicon-comment comment <%= '---' == TB.GUI.getValue( data.listDeclined[i].comment, '---' ) ? 'faded' : '' %>"></i>&nbsp;<i class="comment <%= '---' == TB.GUI.getValue( data.listDeclined[i].comment, '---' ) ? 'faded' : '' %>">
                            <%= '---' != TB.GUI.getValue( data.listDeclined[i].comment, '---' ) ? '&quot;' : '' %><%= TB.GUI.getValue( data.listDeclined[i].comment, '---' ) %><%= '---' != TB.GUI.getValue( data.listDeclined[i].comment, '---' ) ? '&quot;' : '' %>
                        </i>
                    </div>
                </div>
            </div>
        </div>

        <% }    %>

    <% } else {     %>

        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-body">
                    Keine
                </div>
            </div>
        </div>

    <% }    %>
</div>

<div class="row">
    <div class="col-md-12">
        <h4>Ausstehend <span class="label label-default"><%= data.listUndecided.length %></span></h4>

        <div class="panel panel-default">
            <div class="panel-body">

                <% if ( data.listUndecided && data.listUndecided.length > 0 ) { %>

                <p>

                    <% for ( var i = 0; i < data.listUndecided.length; i++ ) { %>

                    <%= ( i > 0 ) ? ' - ' : '' %>

                    <a type="button"
                       href="<%= TB.Controller.getUrl( 'Player', 'index', { profile_id : data.listUndecided[i].id } ) %>">
                        <%= data.listUndecided[i].first_name %>&nbsp;<%= data.listUndecided[i].last_name %>
                    </a>

                    <% }    %>


                </p>

                <%  } else {  %>

                <p>Keine</p>

                <%  }   %>

            </div>
        </div>
    </div>
</div>

<?php

/*
<div class="specialContentBig">

    <div class="row">
        <div class="col-md-12">

            <h4>Zusagen <span class="label label-success"><%= data.listAccepted.length %></span></h4>

            <div class="panel panel-default">
                <div class="panel-body">

                    <% if( data.listAccepted && data.listAccepted.length > 0 ) { %>

                        <table class="table table-striped table-appointment-attendees">
                            <thead>
                            <tr>
                                <th>&nbsp;</th>
                                <th>Name</th>
                                <th>Kommentar</th>
                                <th>Zeit</th>
                            </tr>
                            </thead>
                            <tbody>
                        <% for ( var i = 0; i < data.listAccepted.length; i++ ) { %>

                            <tr data-appointment_id="<%= data.listAccepted[i].id %>">
                                <td data-title="#"><%= (i+1) %>.</td>
                                <td data-title="Name">
                                    <a type="button"
                                       href="<%= TB.Controller.getUrl( 'Player', 'index', { profile_id : data.listAccepted[i].id } ) %>">
                                        <%= TB.GUI.playerName( data.listAccepted[i] ) %>
                                    </a>
                                </td>
                                <td data-title="Kommentar"><%= TB.GUI.getValue( data.listAccepted[i].comment ) %></td>
                                <td data-title="Zeit"><%= TB.Utils.getDatetimeStringFromUnixTimestamp( data.listAccepted[i].last_update )%></td>
                            </tr>

                        <%  }   %>
                            </tbody>
                        </table>

                    <%  } else {  %>

                        <p>Keine</p>

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

            <h4>Absagen <span class="label label-danger"><%= data.listDeclined.length %></span></h4>

            <div class="panel panel-default">
                <div class="panel-body">

                    <% if ( data.listDeclined && data.listDeclined.length > 0 ) { %>

                    <table class="table table-striped table-appointment-attendees">
                        <thead>
                        <tr>
                            <th>&nbsp;</th>
                            <th>Name</th>
                            <th>Kommentar</th>
                            <th>Zeit</th>
                        </tr>
                        </thead>
                        <tbody>

                        <% for ( var i = 0; i < data.listDeclined.length; i++ ) { %>

                            <tr data-appointment_id="<%= data.listDeclined[i].id %>">
                                <td data-title="#">&nbsp;</td>
                                <td data-title="Name">
                                    <a type="button"
                                       href="<%= TB.Controller.getUrl( 'Player', 'index', { profile_id : data.listDeclined[i].id } ) %>">
                                        <%= TB.GUI.playerName( data.listDeclined[i] ) %>
                                    </a>
                                </td>
                                <td data-title="Kommentar"><%= TB.GUI.getValue( data.listDeclined[i].comment ) %></td>
                                <td data-title="Zeit"><%= TB.Utils.getDatetimeStringFromUnixTimestamp( data.listDeclined[i].last_update )%></td>
                            </tr>

                        <%  }   %>
                        </tbody>
                    </table>

                    <%  } else {  %>

                        <p>Keine</p>

                    <%  }   %>

                </div>
            </div>

            <h4>Ausstehend <span class="label label-default"><%= data.listUndecided.length %></span></h4>

            <div class="panel panel-default">
                <div class="panel-body">

                    <% if ( data.listUndecided && data.listUndecided.length > 0 ) { %>

                    <p>

                        <% for ( var i = 0; i < data.listUndecided.length; i++ ) { %>

                            <%= ( i > 0 ) ? ' - ' : '' %>

                            <a type="button"
                               href="<%= TB.Controller.getUrl( 'Player', 'index', { profile_id : data.listUndecided[i].id } ) %>">
                                <%= TB.GUI.playerName( data.listUndecided[i] ) %>
                            </a>

                        <% }    %>


                    </p>

                    <%  } else {  %>

                    <p>Keine</p>

                    <%  }   %>

                </div>
            </div>


        </div>
    </div>

</div>




<div class="specialContentSmall">

    <div class="row">
        <div class="col-md-12">

            <h4>Zusagen <span class="label label-success"><%= data.listAccepted.length %></span></h4>

            <div class="panel panel-default">
                <div class="panel-body">

                    <% if( data.listAccepted && data.listAccepted.length > 0 ) { %>

                    <table class="table table-striped table-appointment-attendees">
                        <thead>
                        <tr>
                            <th>&nbsp;</th>
                            <th>Name</th>
                            <th>Zeit</th>
                        </tr>
                        </thead>
                        <tbody>
                        <% for ( var i = 0; i < data.listAccepted.length; i++ ) { %>

                        <tr data-appointment_id="<%= data.listAccepted[i].id %>">
                            <td data-title="#"><%= (i+1) %>.</td>
                            <td data-title="Name">
                                <a type="button"
                                   href="<%= TB.Controller.getUrl( 'Player', 'index', { profile_id : data.listAccepted[i].id } ) %>">
                                    <%= TB.GUI.playerName( data.listAccepted[i] ) %>
                                </a>
                            </td>
                            <td data-title="Zeit"><%= TB.Utils.getDatetimeStringFromUnixTimestampShortYear( data.listAccepted[i].last_update )%></td>
                        </tr>

                        <%  }   %>
                        </tbody>
                    </table>

                    <%  } else {  %>

                    <p>Keine</p>

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

            <h4>Absagen <span class="label label-danger"><%= data.listDeclined.length %></span></h4>

            <div class="panel panel-default">
                <div class="panel-body">

                    <% if ( data.listDeclined && data.listDeclined.length > 0 ) { %>

                    <table class="table table-striped table-appointment-attendees">
                        <thead>
                        <tr>
                            <th>&nbsp;</th>
                            <th>Name</th>
                            <th>Zeit</th>
                        </tr>
                        </thead>
                        <tbody>

                        <% for ( var i = 0; i < data.listDeclined.length; i++ ) { %>

                        <tr data-appointment_id="<%= data.listDeclined[i].id %>">
                            <td data-title="#">&nbsp;</td>
                            <td data-title="Name">
                                <a type="button"
                                   href="<%= TB.Controller.getUrl( 'Player', 'index', { profile_id : data.listDeclined[i].id } ) %>">
                                    <%= TB.GUI.playerName( data.listDeclined[i] ) %>
                                </a>
                            </td>
                            <td data-title="Zeit"><%= TB.Utils.getDatetimeStringFromUnixTimestampShortYear( data.listDeclined[i].last_update )%></td>
                        </tr>

                        <%  }   %>
                        </tbody>
                    </table>

                    <%  } else {  %>

                    <p>Keine</p>

                    <%  }   %>

                </div>
            </div>

            <h4>Ausstehend <span class="label label-default"><%= data.listUndecided.length %></span></h4>

            <div class="panel panel-default">
                <div class="panel-body">

                    <% if ( data.listUndecided && data.listUndecided.length > 0 ) { %>

                    <p>

                        <% for ( var i = 0; i < data.listUndecided.length; i++ ) { %>

                        <%= ( i > 0 ) ? ' - ' : '' %>

                        <a type="button"
                           href="<%= TB.Controller.getUrl( 'Player', 'index', { profile_id : data.listUndecided[i].id } ) %>">
                            <%= data.listUndecided[i].first_name %>&nbsp;<%= data.listUndecided[i].last_name %>
                        </a>

                        <% }    %>


                    </p>

                    <%  } else {  %>

                    <p>Keine</p>

                    <%  }   %>

                </div>
            </div>


        </div>
    </div>

</div>
*/
?>
<div class="row">

    <% var colNum = 1, redirect; %>
    <% colNum += ( TB.Client.can( TB.ACL.RIGHTS.APPOINTMENT_SENDREMINDER ) ) ? 1 : 0; %>
    <% colNum += ( TB.Premium.isPremium() ) ? 0 : 0; %>
    <% colNum += ( TB.Client.can( TB.ACL.RIGHTS.APPOINTMENT_SETATTENDANCESTATUSBYTRAINER ) ) ? 1 : 0; %>
    <% colNum = 12 / colNum; %>

    <% redirect = TB.Utils.encodeRedirect( 'Appointment', 'detail', { appointment_id : data.appointment.id }, data.appointment.team_id ); %>

    <% if ( TB.Client.can( TB.ACL.RIGHTS.APPOINTMENT_SENDREMINDER ) ) { %>
        <div class="col-md-<%= colNum %> col-sm-12">
            <button id="btn_appointment_reminder"
                    class="btn btn-primary btn-block"
                    type="button"
                    data-appointment-id="<%= data.appointment.id %>">
                Erinnerung Senden
            </button>
        </div>
    <% } %>

    <% if ( 1 == 0 ) { %>
        <div class="col-md-<%= colNum %> col-sm-12">
            <a id="btn_appointment_reminder_whatsapp"
                    class="btn btn-premium btn-block"
                    data-id="btn-whats-app-reminder"
                    href="<%= TB.Utils.getWhatsAppUrl( 'Bitte denkt an folgenden Termin: ', redirect ) %>"
                    type="button">
                WhatsApp Erinnerung <i class="glyphicon glyphicon-star"></i>
            </a>
        </div>
    <% }    %>

    <% if ( TB.Client.can( TB.ACL.RIGHTS.APPOINTMENT_SETATTENDANCESTATUSBYTRAINER ) ) { %>
        <div class="col-md-<%= colNum %> col-sm-12">
            <button role="button"
                    id="btn_edit_appointment_attendees"
                    class="btn btn-premium btn-block">
                Teilnehmerliste bearbeiten <i class="glyphicon glyphicon-star"></i>
            </button>
        </div>
    <% } %>

    <div class="col-md-<%= colNum %> col-sm-12">
        <button id="btn_pdf_export"
                class="btn btn-primary btn-block"
                type="button"
                data-appointment-id="<%= data.appointment.id %>">
            PDF Export
        </button>
    </div>

</div>