<%
var isMatch = data.appointment.subject ? false : true;
%>
<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-lg-12">

        <% if ( isMatch ) { %>

        <div class="panel panel-default">
            <table class="table table-bordered table-appointment-detail">
                <tr>
                    <td>Beginn</td>
                    <td>
                        <%= TB.Utils.getDatetimeStringFromUnixTimestamp( data.appointment.starttime ) %>
                    </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, '---' ) %>
                    </td>
                </tr>
                <tr>
                    <td>Kommentar</td>
                    <td><%= TB.GUI.getValue( data.appointment.comment, '---' )%></td>
                </tr>
            </table>

        </div>

        <%  } else {    %>

        <div class="panel panel-default">
            <table class="table table-bordered table-appointment-detail">
                <tr>
                    <td>Beginn</td>
                    <td>
                        <%= TB.Utils.getDatetimeStringFromUnixTimestamp( data.appointment.starttime ) %>&nbsp;
                    </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, '---' ) %>
                    </td>
                </tr>
                <tr>
                    <td>Kommentar</td>
                    <td><%= TB.GUI.getValue( data.appointment.comment, '---' )%></td>
                </tr>
            </table>

        </div>

        <% }    %>

    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <h4>Teilnehmerliste</h4>
        <div class="panel panel-default">
            <div class="panel-body">

                <div class="specialContentBig">

                    <table id="appointment_edit_attendees" class="table table-striped">
                        <thead>
                        <tr>
                            <th>Name</th>
                            <th>Kommentar</th>
                            <th>Status</th>
                        </tr>
                        </thead>
                        <tbody>
                        <% for ( var i = 0; i < data.profiles.length; i++ ) { %>
                            <tr data-profile_id="<%= data.profiles[i].id %>">
                                <td data-title="Name">
                                    <a type="button"
                                       href="<%= TB.Controller.getUrl( 'Player', 'index', { profile_id : data.profiles[i].id } ) %>">
                                        <%= TB.GUI.playerName( data.profiles[i] ) %>
                                    </a>
                                </td>
                                <td data-title="Kommentar"><%= TB.GUI.getValue( data.profiles[i].comment ) %></td>
                                <td data-title="Status">
                                    <span class="label <%= ( data.profiles[i].status == 'accepted' ) ? 'label-success' : '' %>"
                                          data-status="accepted">
                                        <span class="glyphicon glyphicon-thumbs-up"></span>
                                    </span>&nbsp;
                                    <span class="label <%= ( data.profiles[i].status == 'declined' ) ? 'label-danger' : '' %>"
                                          data-status="declined">
                                        <span class="glyphicon glyphicon-thumbs-down"></span>
                                    </span>
                                </td>
                            </tr>
                        <% } %>
                        </tbody>
                    </table>
                </div>

                <div class="specialContentSmall">

                    <table id="appointment_edit_attendees" class="table table-striped">
                        <thead>
                        <tr>
                            <th>Name</th>
                            <th>Status</th>
                        </tr>
                        </thead>
                        <tbody>
                        <% for ( var i = 0; i < data.profiles.length; i++ ) { %>
                        <tr data-profile_id="<%= data.profiles[i].id %>">
                            <td data-title="Name">
                                <a type="button"
                                   href="<%= TB.Controller.getUrl( 'Player', 'index', { profile_id : data.profiles[i].id } ) %>">
                                    <%= TB.GUI.playerName( data.profiles[i] ) %>
                                </a>
                            </td>
                            <td data-title="Status">
                                    <span class="label <%= ( data.profiles[i].status == 'accepted' ) ? 'label-success' : '' %>"
                                          data-status="accepted">
                                        <span class="glyphicon glyphicon-thumbs-up"></span>
                                    </span>&nbsp;
                                    <span class="label <%= ( data.profiles[i].status == 'declined' ) ? 'label-danger' : '' %>"
                                          data-status="declined">
                                        <span class="glyphicon glyphicon-thumbs-down"></span>
                                    </span>
                            </td>
                        </tr>
                        <% } %>
                        </tbody>
                    </table>
                </div>

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