{% extends "admin_base.html" %}
{% block page_title %}Add Prize Definition{% endblock %}

{% block admin_content %}
<main class="mx-auto w-full max-w-3xl px-4 py-6 sm:px-6 lg:px-8">
    <header class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div>
            <h1 class="text-2xl font-bold text-foreground sm:text-3xl">Add Prize Definition</h1>
            <p class="mt-1 text-sm text-muted">Set the prize name and the winning pattern used by Howzzy games.</p>
        </div>
        <a href="/plugins/howzzy/prizes_index" class="btn btn-secondary self-start sm:self-auto">Cancel</a>
    </header>

    <section class="mt-6 rounded-xl border border-divider bg-surface p-4 shadow-sm sm:p-6">
        <div id="howzzy-prize-form-fields"></div>
        <div class="mt-6 flex flex-col gap-3 border-t border-divider pt-5 sm:flex-row sm:items-center sm:justify-between">
            <p id="howzzy-prize-feedback" class="text-sm text-muted" role="status" aria-live="polite" hidden></p>
            <button type="button" class="btn btn-primary w-full sm:w-auto" id="howzzy-prize-save-btn">Create Prize</button>
        </div>
    </section>
</main>
{% endblock %}

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