{% 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 %}