{% extends "base.html" %}
{% block page_title %}Announcer — {{ game.name }}{% endblock %}

{% block content %}
<main class="mx-auto w-full max-w-5xl px-4 py-6 text-foreground sm:px-6 lg:px-8" id="announcerRoot" data-game-id="{{ game.id }}" data-is-host="{{ is_host | json_encode }}">
    <header class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
        <div class="min-w-0"><h1 class="break-words text-2xl font-bold sm:text-3xl">{{ game.name }}</h1><p class="mt-1 text-sm text-muted">Game announcer</p></div>
        <nav aria-label="Game actions" class="flex flex-wrap gap-2">
            {% if is_host %}<button id="resetBtn" class="blocks-button blocks-button-danger blocks-button-sm" type="button">Reset game</button>{% endif %}
            <a href="/plugins/howzzy/games_show/{{ game.id }}" class="blocks-button blocks-button-secondary blocks-button-sm">Back to game</a>
        </nav>
    </header>

    <p id="announcerFeedback" class="mb-5 rounded-xl border border-divider bg-surface px-4 py-3 text-sm text-muted" role="status" aria-live="polite" hidden></p>

    <section class="mb-6 rounded-2xl border border-divider bg-surface p-5 text-center shadow-sm sm:p-8" aria-labelledby="current-number-label">
        <div class="mx-auto flex h-32 w-32 items-center justify-center rounded-full bg-brand text-5xl font-extrabold text-white shadow-sm sm:h-36 sm:w-36 sm:text-6xl" id="currentCallout" aria-live="polite" aria-atomic="true"><span>--</span></div>
        <p id="current-number-label" class="mt-3 text-sm font-medium text-muted">Current number</p>
        {% if is_host %}<div class="mt-5"><button id="nextBtn" class="blocks-button blocks-button-primary w-full text-lg sm:w-auto sm:min-w-64" type="button">Call next number <span aria-hidden="true">»</span></button></div>{% endif %}
    </section>

    {% if is_host %}<section class="mb-7 rounded-2xl border border-divider bg-surface p-4 shadow-sm sm:p-6" aria-labelledby="claims-heading">
        <div class="flex flex-wrap items-center justify-between gap-2"><h2 id="claims-heading" class="text-lg font-semibold">Incoming claims</h2><span class="text-xs text-muted">Review each player claim</span></div>
        <div id="claimsList" class="mt-4 space-y-3" aria-live="polite"><p class="rounded-lg bg-canvas px-4 py-5 text-center text-sm text-muted">No pending claims</p></div>
    </section>{% endif %}

    <section class="rounded-2xl border border-divider bg-surface p-4 shadow-sm sm:p-6" aria-labelledby="board-heading">
        <div class="mb-4 flex flex-wrap items-end justify-between gap-2"><h2 id="board-heading" class="text-lg font-semibold">Callout board</h2><p class="text-xs text-muted">Called numbers are highlighted.</p></div>
        <div class="grid grid-cols-6 gap-2 sm:grid-cols-9 md:grid-cols-10" id="boardGrid" aria-label="Numbers 1 through 90"></div>
    </section>
</main>
{% endblock %}

{% block scripts %}
<script src="/plugins/howzzy/assets/js/howzzy-live.js"></script>
<script src="/plugins/howzzy/assets/js/announcer.js"></script>
{% endblock %}