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

{% block content %}
<main class="mx-auto flex min-h-[70vh] w-full max-w-2xl items-center px-4 py-8 text-foreground sm:px-6 sm:py-12">
    <section class="w-full rounded-2xl border border-divider bg-surface p-5 shadow-sm sm:rounded-3xl sm:p-9" aria-labelledby="join-title">
        <div class="mx-auto flex size-16 items-center justify-center rounded-2xl bg-brand/10 text-3xl text-brand" aria-hidden="true">🎫</div>
        <h1 id="join-title" class="mt-5 text-center text-2xl font-bold tracking-tight sm:text-3xl">Join session</h1>
        <p class="mt-3 text-center text-base text-muted">You're invited to <strong class="break-words text-foreground">{{ game.name }}</strong></p>
        <p class="mx-auto mt-4 max-w-lg text-center leading-relaxed text-muted">Claim a digital play sheet for this hosted session. The host runs the session on the Howzzy platform.</p>

        <form id="joinForm" class="mt-7" data-game-id="{{ game.id }}">
            <input type="hidden" name="game_id" value="{{ game.id }}">
            <p id="joinFeedback" class="mb-3 rounded-lg border border-divider bg-canvas px-3 py-2 text-sm text-muted" role="status" aria-live="polite" hidden></p>
            <button type="submit" class="blocks-button blocks-button-primary w-full sm:min-h-12 sm:text-base">Get my play sheet</button>
        </form>
        <p class="mt-4 text-center text-xs text-muted">Your play sheet will be linked to your signed-in account.</p>
    </section>
</main>
{% endblock %}

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