{% extends "base.html" %}
{% block page_title %}Howzzy TV — Pair a Screen{% endblock %}

{% block content %}
<main class="mx-auto flex min-h-[70vh] w-full max-w-4xl items-center justify-center px-4 py-10 text-center text-foreground sm:px-6">
    <section class="w-full rounded-3xl border border-divider bg-surface p-6 shadow-sm sm:p-10" aria-labelledby="tv-pairing-title">
        <span class="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-brand text-2xl text-white" aria-hidden="true"><i class="fas fa-tv"></i></span>
        <h1 id="tv-pairing-title" class="mt-5 text-3xl font-bold sm:text-4xl">Howzzy TV</h1>
        <p class="mx-auto mt-2 max-w-xl text-base text-muted sm:text-lg">Cast your game to the big screen</p>
        <p id="loading" class="mt-8 text-sm font-medium text-brand" role="status" aria-live="polite">Generating a secure pairing code…</p>
        <section id="codeDisplay" class="mt-8" aria-labelledby="pairing-code-label" hidden>
            <h2 id="pairing-code-label" class="text-sm font-semibold uppercase tracking-wide text-muted">Enter this code in your Game Dashboard</h2>
            <p class="my-5 font-mono text-6xl font-extrabold tracking-[0.35em] text-brand sm:text-8xl" id="tvCode">----</p>
            <p id="pairStatus" class="text-sm text-muted" role="status" aria-live="polite">Waiting for your game dashboard…</p>
        </section>
    </section>
</main>
{% endblock %}

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