{% extends "admin_base.html" %}
{% block extra_head %}
{{ super() }}
<link rel="stylesheet" href="{{ static_url('/static/css/services.css') }}">
<link rel="stylesheet" href="{{ static_url('/static/css/statistics.css') }}">
{% endblock %}
{% block admin_content %}
<div class="admin-toolbar statistics-toolbar">
    <h2>Statistics</h2>
    <div class="statistics-controls">
        <div class="statistics-controls-primary">
            <label for="statistics-window">Window
                <select id="statistics-window">
                    <option value="24" {% if window_hours == 24 %}selected{% endif %}>Last 24 hours</option>
                    <option value="168" {% if window_hours == 168 %}selected{% endif %}>Last 7 days</option>
                    <option value="720" {% if window_hours == 720 %}selected{% endif %}>Last 30 days</option>
                    <option value="2160" {% if window_hours == 2160 %}selected{% endif %}>Last 90 days</option>
                    <option value="0" {% if window_hours == 0 %}selected{% endif %}>All time</option>
                </select>
            </label>
            <label class="statistics-compare-label">
                <input type="checkbox" id="statistics-compare" checked>
                <span>Compare previous period</span>
            </label>
        </div>
        <span class="statistics-generated" data-meta="generated" role="status" aria-live="polite">-</span>
    </div>
</div>

<nav class="admin-tabs" data-overflow-tabs aria-label="Statistics categories">
    <div class="overflow-tabs-strip">
        {% for tab in tabs %}
        <a href="/admin/statistics?tab={{ tab['key'] }}&hours={{ window_hours }}" class="admin-tab {% if tab['active'] %}active{% endif %}" data-tab="{{ tab['key'] }}" data-menu-icon="{{ tab['icon'] }}" data-menu-label="{{ tab['label'] }}">
            <span class="icon">{{ tab['icon'] }}</span> {{ tab['label'] }}
        </a>
        {% endfor %}
    </div>
    <button type="button" class="admin-tab overflow-tabs-more" aria-haspopup="menu" aria-label="More tabs" hidden><span class="icon">&#x22EF;</span> More</button>
</nav>

<div id="statistics-root" class="statistics" role="region" aria-label="Platform statistics" aria-live="polite">
    <p class="admin-empty" data-empty>Loading statistics...</p>
</div>

<script type="application/json" id="statistics-initial">{{ initial | tojson }}</script>
{% endblock %}
{% block extra_js %}
<script src="{{ static_url('/static/vendor/chartjs/chart.umd.min.js') }}" defer></script>
<script type="module" src="{{ static_url('/static/js/StatisticsDashboard.js') }}"></script>
<script type="module">
new window.StatisticsDashboard({
    rootId: "statistics-root",
    initialId: "statistics-initial",
    activeTab: {{ active_tab | tojson }},
    windowHours: {{ window_hours }},
}).start();
</script>
{% endblock %}