<div class="table-responsive">
    <table class="table table-striped table-bordered table-hover datatable" >
        <thead>
        <tr>
            <th>&nbsp;</th>
            <th>ID</th>
            <th>Status</th>
            <th>Kategorie</th>
            <th>Name</th>
            <th>Datum</th>
            <th>Uhrzeit</th>
            <th>Ort</th>
            <th>Abrechnungsfaktor</th>
            <th>Zusagen</th>
            <th></th>
        </tr>
        </thead>
        <tbody>
        <% for ( let ai = 0; ai < apps.length; ai++ )    {   %>
        <tr data-type="appointment"
            class="clickable"
            data-appointment-id="<%= apps[ ai ].id %>">
            <td class="selected-check text-center">
                <i class="fa fa-check-square-o" aria-hidden="true"></i>
                <i class="fa fa-square-o" aria-hidden="true"></i>
            </td>
            <td><%= apps[ ai ].id %></td>
            <td>
                <% if ( 'open' === apps[ ai ].state ) { %>
                <%=raw apps[ ai ].isOver() ? '<span class="badge badge-dark">stattgefunden</span>' : '<span class="badge badge-primary">Findet statt</span>' %>
                <% } else if ( 'draft' === apps[ ai ].state ) { %>
                <span class="badge badge-warning">Entwurf</span>
                <% } else if ( 'cancelled' === apps[ ai ].state ) { %>
                <span class="badge badge-danger">Abgesagt</span>
                <% }    %>
            </td>
            <td>
                <% for ( var ci = 0; ci < apps[ ai ].category_ids_js.length; ci++ ) {   %>
                <%=raw '<span class="badge badge-dark">' + activeGroup.getCourseCategoryNameById( apps[ ai ].category_ids_js[ ci ] ) + '</span>' %>
                <% }    %>
            </td>
            <td>
                <%= apps[ ai ].subject ? apps[ ai ].subject : '---'  %>
            </td>
            <td data-order="<%= apps[ ai ].getMomentOfStart().unix() %>">
                <%= apps[ ai ].getMomentOfStart().format( 'dddd, DD. MMMM YYYY' ) %>
            </td>
            <td><%= apps[ ai ].getMomentOfStart().format( 'HH:mm' ) %> - <%= apps[ ai ].getMomentOfEnd().format( 'HH:mm' ) %></td>
            <td><%= apps[ ai ].location ? apps[ ai ].location : '---' %></td>
            <td class="text-center"><%= _nf ( apps[ ai ].getPriceFactor(), 2 ) %></td>
            <td class="text-center"><%= apps[ ai ].getNumAcceptedAttendees() %></td>
            <td class="text-center">
                <button type="button"
                        data-type="btn-edit-appointment"
                        data-appointment-id="<%= apps[ ai ].id %>"
                        class="btn btn-sm btn-primary">
                    <i class="fa fa-pencil-square-o"></i>
                </button>
                <button type="button"
                        data-type="btn-detail-appointment"
                        data-appointment-id="<%= apps[ ai ].id %>"
                        class="btn btn-sm btn-primary">
                    <i class="fa fa-search"></i>
                </button>
                <button type="button"
                        data-type="btn-attendees-appointment"
                        data-appointment-id="<%= apps[ ai ].id %>"
                        class="btn btn-sm btn-primary">
                    <i class="fa fa-users"></i>
                </button>
                <button type="button"
                        data-type="btn-chat-appointment"
                        data-appointment-id="<%= apps[ ai ].id %>"
                        class="btn btn-sm btn-primary">
                    <i class="fa fa-comments-o"></i>
                </button>
            </td>
        </tr>
        <% }    %>
        </tbody>
    </table>
</div>