{% extends 'base/base.html' %}

{% block title %}Admin · Errors{% endblock %}

{% block content %}
<section class="w-full">
    <div class="flex items-start justify-between">
        <div>
            <h2 class="font-light text-ink text-2xl">Admin</h2>
            <p class="mt-2 text-sm text-ink-muted">Owner-only overview and error log.</p>
        </div>
        <span class="inline-flex items-center gap-1.5 text-[11px] font-mono text-success">
            <span class="w-1.5 h-1.5 rounded-full bg-success animate-pulse"></span> live
        </span>
    </div>

    {% include 'admin/partials/nav.html' %}
</section>

<!-- Stats -->
<section
    id="admin-stats"
    hx-get="{{ url_for('admin_bp.stats') }}"
    hx-trigger="load, every 10s"
    hx-swap="innerHTML"
    class="w-full"
>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        {% for _ in range(4) %}
        <div class="rounded-xl border border-line bg-surface p-5 animate-pulse">
            <div class="h-6 w-12 rounded bg-line"></div>
            <div class="h-3 w-20 rounded bg-line mt-2"></div>
        </div>
        {% endfor %}
    </div>
</section>

<!-- Error graphs -->
<section class="w-full grid grid-cols-1 lg:grid-cols-2 gap-4">
    <div class="rounded-xl border border-line bg-surface p-5">
        <div class="flex items-center gap-2 mb-3">
            <ion-icon name="bar-chart-outline" class="text-brand text-lg"></ion-icon>
            <h3 class="text-sm font-semibold text-ink">Errors by day</h3>
            <span class="text-xs text-ink-muted">last 14 days</span>
        </div>
        <bar-chart data='{{ daily | tojson }}' theme='{{ chart_theme_json() }}' x-title="Day" y-title="Errors"></bar-chart>
    </div>

    <div class="rounded-xl border border-line bg-surface p-5">
        <div class="flex items-center gap-2 mb-3">
            <ion-icon name="pulse-outline" class="text-brand text-lg"></ion-icon>
            <h3 class="text-sm font-semibold text-ink">Errors by hour</h3>
            <span class="text-xs text-ink-muted">last 24 hours</span>
        </div>
        <area-chart data='{{ hourly | tojson }}' theme='{{ chart_theme_json() }}' x-title="Hour" y-title="Errors"></area-chart>
    </div>
</section>

<!-- Errors -->
<section class="w-full">
    <div class="flex items-center justify-between mb-4">
        <div class="flex items-center gap-2">
            <ion-icon name="bug-outline" class="text-danger text-lg"></ion-icon>
            <h3 class="text-sm font-semibold text-ink">Errors</h3>
            <span class="text-xs text-ink-muted">newest first</span>
        </div>

        <form method="POST" action="{{ url_for('admin_bp.clear_errors') }}"
              onsubmit="return confirm('Clear the entire error log?');">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
            <button type="submit" class="text-xs text-danger hover:underline">Clear all</button>
        </form>
    </div>

    <div
        id="admin-errors"
        hx-get="{{ url_for('admin_bp.errors') }}"
        hx-trigger="load, every 5s"
        hx-swap="innerHTML"
        class="w-full"
    >
        <p class="text-sm text-ink-muted">Loading errors…</p>
    </div>
</section>
{% endblock %}