<%=raw app.core.View.getTemplate( 'stats-nav', { activeTab : 'planning' } ) %>
<div class="card">
    <div class="card-body">
        <div class="row">
            <div class="col">
                <div class="form-group">
                    <label for="select-team-id">
                        <%= _lc( 'STATS_GROUP_NAME' ) %>
                    </label>
                    <select class="form-control form-control-sm"
                            name="team-id"
                            data-id="select-team-id"
                            id="select-team-id">
                        <% var groups = app.model.SessionUser.getAdminGroups(); %>
                        <% for ( var gi = 0; gi < groups.length; gi++ ) {    %>
                        <option value="<%= groups[ gi ].getId() %>" <%= ( groups[ gi ].getId() == groupId ) ? 'selected="selected"' : '' %>>
                        <%= groups[ gi ].getName() %>
                        </option>
                        <% }    %>
                    </select>
                </div>
            </div>
        </div>
        <h4 class="in-card" style="padding-left: 0; margin-top: 12px; margin-bottom: 24px;">Ausblick auf die kommenden 7 Tage</h4>
        <div class="row">
            <div class="col">
                <div class="stat-box">
                    <div class="stat-box-header">
                        Termine
                    </div>
                    <div class="stat-box-body">
                        <%= numApps %>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="stat-box">
                    <div class="stat-box-header">
                        Teilnahmen
                    </div>
                    <div class="stat-box-body">
                        <%= numAttendances %>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="stat-box">
                    <div class="stat-box-header">
                        Teilnehmer / Kurs
                    </div>
                    <div class="stat-box-body">
                        <%= avgAttancePerAppointment.toFixed( 2 ) %>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="stat-box">
                    <div class="stat-box-header">
                        Aktive Teilnehmer
                    </div>
                    <div class="stat-box-body">
                        <%= percentAttendantsToMembers.toFixed( 2 ) %> %
                    </div>
                </div>
            </div>
        </div>
        <h6 class="in-card">Zusagen pro Tag</h6>
        <div class="ct-chart"></div>
        <h6 class="in-card">Top 10 Termine</h6>
        <div class="row">
            <div class="col-12">
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                        <tr>
                            <th>&nbsp;</th>
                            <th>Name</th>
                            <th>Datum</th>
                            <th class="text-center">Teilnehmer</th>
                        </tr>
                        </thead>
                        <tbody>
                        <% for ( var tai = 0; tai < 10; tai++ ) {   %>
                        <% if ( appsTop10.length > tai ) {  %>
                        <tr class="clickable"
                            data-type="tr-app-row"
                            data-appointment-id="<%= appsTop10[ tai ].app.getId() %>">
                            <td class="text-center"><%= appsTop10[ tai ].rank %>.</td>
                            <td><%= appsTop10[ tai ].app.getSubject() %></td>
                            <td><%= appsTop10[ tai ].app.getMomentStart().format( 'HH:mm DD.MM.YY' ) %></td>
                            <td class="text-center"><%= appsTop10[ tai ].numAttendees %></td>
                        </tr>
                        <% } else {  %>
                        <tr>
                            <td class="text-center">-</td>
                            <td>-</td>
                            <td>-</td>
                            <td class="text-center">-</td>
                        </tr>
                        <% }    %>
                        <% }    %>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <h6 class="in-card">Top 10 Teilnehmer</h6>
        <div class="row">
            <div class="col-12">
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                        <tr>
                            <th>&nbsp;</th>
                            <th>Name</th>
                            <th class="text-center">Teilnahmen</th>
                        </tr>
                        </thead>
                        <tbody>
                        <% for ( var mai = 0; mai < 10; mai++ ) {   %>
                        <% if ( memberTop10.length > mai ) {  %>
                        <tr class="clickable trVAlignMiddle"
                            data-type="tr-member-row"
                            data-member-id="<%= memberTop10[ mai ].mem.getId() %>">
                            <td class="text-center"><%= memberTop10[ mai ].rank %>.</td>
                            <td><%= memberTop10[ mai ].mem.getLastFirstName() %></td>
                            <td class="text-center"><%= memberTop10[ mai ].numAttendances %></td>
                        </tr>
                        <% } else {  %>
                        <tr>
                            <td class="text-center">-</td>
                            <td>-</td>
                            <td class="text-center">-</td>
                        </tr>
                        <% }    %>
                        <% }    %>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!--
        <p class="chart-legend">
            <span class="badge badge-success">&nbsp;</span>&nbsp;<%= _lc( 'ACCEPTANCES' ) %> <span class="badge badge-warning">&nbsp;</span> <%= _lc( 'WATING_LIST' ) %>
        </p>
        -->
    </div>
    <!--
    <div class="card-footer">
    </div>
    -->
</div>