{% 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/ai_usage.css') }}">
{% endblock %}
{% block admin_content %}
<div class="admin-toolbar">
    <h2>AI usage</h2>
    <div class="ai-usage-controls">
        <label for="ai-usage-window">Window
            <select id="ai-usage-window">
                <option value="1">1 hour</option>
                <option value="24">24 hours</option>
                <option value="48" selected>48 hours</option>
                <option value="168">7 days</option>
                <option value="0">All time</option>
            </select>
        </label>
        <label><input type="checkbox" id="ai-usage-divided"> Show breakdowns</label>
        <span class="ai-usage-generated" data-meta="generated" role="status" aria-live="polite" aria-label="Last generated">-</span>
        <form method="POST" action="/admin/ai-quota/reset-guests" class="admin-inline-form" aria-label="Reset guest quotas">
            <button type="submit" class="admin-btn admin-btn-sm" data-confirm-danger data-confirm="Reset guest AI quotas for all guests?"><span class="icon">&#x1F504;</span> Reset guest quotas</button>
        </form>
        <form method="POST" action="/admin/ai-quota/reset-all" class="admin-inline-form" aria-label="Reset all quotas">
            <button type="submit" class="admin-btn admin-btn-sm" data-confirm-danger data-confirm="Reset AI quotas for every user and guest?"><span class="icon">&#x1F504;</span> Reset all quotas</button>
        </form>
    </div>
</div>
<div id="ai-usage-root" class="ai-usage" role="region" aria-label="AI usage metrics" aria-live="polite">
    <p class="admin-empty" data-empty>Loading metrics...</p>
</div>
{% endblock %}
{% block extra_js %}
<script type="module" src="{{ static_url('/static/js/AiUsageMonitor.js') }}"></script>
<script type="module">
new window.AiUsageMonitor().start();
</script>
{% endblock %}