<%=raw app.core.View.getTemplate( 'stats-nav', { activeTab : 'overview' } ) %>
<div class="card">
    <!--
    <div class="card-header">
        <i class="fas fa-chart-line"></i> <%= _lc( 'STATS_FEEDBACK' ) %>
    </div>
    -->
    <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.getGroups(); %>
                        <% 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 class="col">
                <div class="form-group">
                    <label for="select-timespan">
                        <%= _lc( 'STATS_TIMESPAN' ) %>
                    </label>
                    <select class="form-control form-control-sm"
                            name="select-timespan"
                            data-id="select-timespan"
                            id="select-timespan">
                        <option value="7" <%= ( timespan == "7" ) ? 'selected="selected"' : '' %>>
                            <%= _lc( 'LAST_7_DAYS' ) %>
                        </option>
                        <option value="30" <%= ( timespan == "30" ) ? 'selected="selected"' : '' %>>
                            <%= _lc( 'LAST_30_DAYS' ) %>
                        </option>
                        <option value="90" <%= ( timespan == "90" ) ? 'selected="selected"' : '' %>>
                            <%= _lc( 'LAST_90_DAYS' ) %>
                        </option>
                    </select>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div class="stat-box">
                    <div class="stat-box-header">
                        <%= _lc( 'STAT_MEMBERS' ) %>
                    </div>
                    <div class="stat-box-body">
                        <%= kpis[ 'members' ][ 'now' ] %>
                    </div>
                    <div class="stat-box-footer">
                        <%= app.state.Stats.prototype.getBeforeValue( kpis[ 'members' ] ) %>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="stat-box">
                    <div class="stat-box-header">
                        <%= _lc( 'STAT_APPOINTMENTS' ) %>
                    </div>
                    <div class="stat-box-body">
                        <%= kpis[ 'appointments' ][ 'now' ] %>
                    </div>
                    <div class="stat-box-footer">
                        <%= app.state.Stats.prototype.getBeforeValue( kpis[ 'appointments' ] ) %>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="stat-box">
                    <div class="stat-box-header">
                        <%= _lc( 'STAT_FEEDBACKS' ) %>
                    </div>
                    <div class="stat-box-body">
                        <%= kpis[ 'feedbacks' ][ 'now'] %>
                    </div>
                    <div class="stat-box-footer">
                        <%= app.state.Stats.prototype.getBeforeValue( kpis[ 'feedbacks' ] ) %>
                    </div>
                </div>
            </div>
            <!--
            <div class="col">
                <div class="stat-box">
                    <div class="stat-box-header">
                        <%= _lc( 'STAT_ACCEPTED' ) %>
                    </div>
                    <div class="stat-box-body">
                        <%= kpis[ 'accepted'][ 'now'] %>
                    </div>
                    <div class="stat-box-footer">
                        <%= app.state.Stats.prototype.getBeforeValue( kpis[ 'accepted' ] ) %>
                    </div>
                </div>
            </div>
            -->
            <div class="col">
                <div class="stat-box">
                    <div class="stat-box-header">
                        <%= _lc( 'STAT_ATTENDED' ) %>
                    </div>
                    <div class="stat-box-body">
                        <%= kpis[ 'attended' ][ 'now' ] %>
                    </div>
                    <div class="stat-box-footer">
                        <%= app.state.Stats.prototype.getBeforeValue( kpis[ 'attended' ] ) %>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="stat-box">
                    <div class="stat-box-header">
                        <%= _lc( 'STAT_ATTENDANCE_PER_APPOINTMENT' ) %>
                    </div>
                    <div class="stat-box-body">
                        <%= kpis[ 'appointmentWorkload' ][ 'now' ] %>
                    </div>
                    <div class="stat-box-footer">
                        <%= app.state.Stats.prototype.getBeforeValue( kpis[ 'appointmentWorkload' ] ) %>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="stat-box">
                    <div class="stat-box-header">
                        <%= _lc( 'STAT_ATTANDANCE_RELIABILITY' ) %>
                    </div>
                    <div class="stat-box-body">
                        <%= kpis[ 'reliability' ][ 'now' ] %>
                    </div>
                    <div class="stat-box-footer">
                        <%= app.state.Stats.prototype.getBeforeValue( kpis[ 'reliability' ] ) %>
                    </div>
                </div>
            </div>
        </div>
        <h6 class="in-card"><%= _lc( 'CHART_FEEDBACK_HEADER' ) %></h6>
        <div class="ct-chart"></div>
        <p class="chart-legend">
            <span class="badge badge-success">&nbsp;</span>&nbsp;Zusagen <span class="badge badge-danger">&nbsp;</span>&nbsp;Absagen <span class="badge badge-warning">&nbsp;</span>&nbsp;Warteliste <span class="badge badge-primary">&nbsp;</span>&nbsp;Rückmeldung insgesamt
        </p>
    </div>
    <div class="card-footer">
        <button type="button"
                class="btn btn-sm btn-primary"
                data-id="btn-update">
            <%= _lc( 'BTN_UPDATE' ) %>
        </button>
    </div>
</div>