{% extends "admin_base.html" %}
{% block page_title %}Dashboard{% endblock %}

{% block admin_content %}
<main class="mx-auto w-full max-w-7xl px-4 py-6 text-foreground sm:px-6 lg:px-8">
    <header class="mb-6">
        <p class="text-sm font-medium text-brand">Howzzy administration</p>
        <h1 class="mt-1 text-2xl font-bold tracking-tight sm:text-3xl">Dashboard</h1>
        <p class="mt-2 max-w-2xl text-sm text-muted">Keep an eye on activity and jump to the tools you need.</p>
    </header>

    <section class="mb-8 grid grid-cols-1 gap-4 sm:grid-cols-2" aria-label="Platform totals">
        <article class="flex min-w-0 items-center gap-4 rounded-2xl border border-divider bg-surface p-5 shadow-sm sm:p-6">
            <span class="flex size-12 shrink-0 items-center justify-center rounded-xl bg-brand/10 text-2xl" aria-hidden="true">👥</span>
            <div class="min-w-0"><p class="text-sm font-medium text-muted">Total users</p><p class="mt-1 text-3xl font-bold tabular-nums">{{ total_users | default(value=0) }}</p></div>
        </article>
        <article class="flex min-w-0 items-center gap-4 rounded-2xl border border-divider bg-surface p-5 shadow-sm sm:p-6">
            <span class="flex size-12 shrink-0 items-center justify-center rounded-xl bg-brand/10 text-2xl" aria-hidden="true">🎲</span>
            <div class="min-w-0"><p class="text-sm font-medium text-muted">Total games</p><p class="mt-1 text-3xl font-bold tabular-nums">{{ total_games | default(value=0) }}</p></div>
        </article>
    </section>

    <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
        <section class="rounded-2xl border border-divider bg-surface p-4 shadow-sm sm:p-6" aria-labelledby="operations-title">
            <h2 id="operations-title" class="border-b border-divider pb-3 text-lg font-semibold">Operations</h2>
            <div class="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2">
                <a href="/plugins/core-users/users" class="group flex min-w-0 items-center gap-3 rounded-xl border border-divider bg-canvas p-4 transition hover:border-brand/50 hover:bg-brand/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand">
                    <span class="flex size-11 shrink-0 items-center justify-center rounded-lg bg-surface text-xl" aria-hidden="true">👥</span>
                    <span class="min-w-0"><span class="block font-semibold">Manage users</span><span class="mt-1 block text-sm text-muted">View and manage tenant accounts</span></span>
                </a>
                <a href="/plugins/howzzy/admin_games" class="group flex min-w-0 items-center gap-3 rounded-xl border border-divider bg-canvas p-4 transition hover:border-brand/50 hover:bg-brand/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand">
                    <span class="flex size-11 shrink-0 items-center justify-center rounded-lg bg-surface text-xl" aria-hidden="true">🎲</span>
                    <span class="min-w-0"><span class="block font-semibold">All games</span><span class="mt-1 block text-sm text-muted">Manage hosted sessions</span></span>
                </a>
            </div>
        </section>

        <section class="rounded-2xl border border-divider bg-surface p-4 shadow-sm sm:p-6" aria-labelledby="configuration-title">
            <h2 id="configuration-title" class="border-b border-divider pb-3 text-lg font-semibold">Configuration</h2>
            <div class="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2">
                <a href="/plugins/howzzy/prizes_index" class="group flex min-w-0 items-center gap-3 rounded-xl border border-divider bg-canvas p-4 transition hover:border-brand/50 hover:bg-brand/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand">
                    <span class="flex size-11 shrink-0 items-center justify-center rounded-lg bg-surface text-xl" aria-hidden="true">🏆</span>
                    <span class="min-w-0"><span class="block font-semibold">Prize definitions</span><span class="mt-1 block text-sm text-muted">Manage game prize patterns</span></span>
                </a>
                <a href="/plugins/howzzy/templates_index" class="group flex min-w-0 items-center gap-3 rounded-xl border border-divider bg-canvas p-4 transition hover:border-brand/50 hover:bg-brand/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand">
                    <span class="flex size-11 shrink-0 items-center justify-center rounded-lg bg-surface text-xl" aria-hidden="true">🎨</span>
                    <span class="min-w-0"><span class="block font-semibold">Ticket templates</span><span class="mt-1 block text-sm text-muted">Manage ticket designs and maps</span></span>
                </a>
            </div>
        </section>
    </div>
</main>
{% endblock %}