{% extends "base.html" %}
{% block page_title %}Create Session{% endblock %}

{% block content %}
<main class="mx-auto w-full max-w-4xl px-4 py-6 sm:px-6 lg:px-8">
    <header class="mb-6 space-y-2">
        <h1 class="text-2xl font-bold text-foreground sm:text-3xl">Create Session</h1>
        <p class="max-w-3xl text-sm text-muted sm:text-base">Platform facility fee applies for offline PDF tools or online hosted play. Ticket count sets capacity only.</p>
    </header>

    {% if user.howzzy_balance < 50 %}
    <aside class="mb-6 flex flex-col gap-4 rounded-xl border border-divider border-l-4 border-l-brand bg-surface p-4 text-foreground sm:flex-row sm:items-center sm:justify-between" role="status">
        <p><strong>Low platform credit:</strong> Your balance is {{ currency_symbol }}{{ user.howzzy_balance | round(precision=2) }}.</p>
        <a href="/plugins/wallet/index" class="btn btn-sm btn-primary self-start sm:self-auto">Add credits</a>
    </aside>
    {% endif %}

    <form method="post" action="/plugins/howzzy/games_index" class="game-form mx-auto w-full max-w-3xl space-y-6 rounded-2xl border border-divider bg-surface p-4 shadow-sm sm:p-8">
        <div class="howzzy-field space-y-2">
            <label for="name" class="block text-sm font-semibold text-foreground">Session name <span aria-hidden="true">*</span></label>
            <input type="text" id="name" name="name" required placeholder="e.g., Family Game Night" autocomplete="off">
        </div>

        <div class="howzzy-field space-y-2">
            <label for="game_type" class="block text-sm font-semibold text-foreground">Facility type <span aria-hidden="true">*</span></label>
            <select id="game_type" name="game_type" required>
                <option value="offline">Offline — print / PDF facility</option>
                <option value="online">Online — hosted play facility</option>
            </select>
            <div id="facility-rules" class="rounded-xl border border-divider bg-canvas p-4 text-foreground" aria-live="polite">
                <p class="text-sm font-semibold">Offline facility includes</p>
                <ul class="mt-2 list-disc space-y-1 pl-5 text-sm text-muted">
                    <li>Any play-sheet template (Classic, Fairy Magic, Little Angel, …)</li>
                    <li>Print / PDF sheet tools</li>
                    <li>Custom-map templates use random generation</li>
                    <li>No player join / QR links</li>
                    <li>Announcer, TV pair, and winners still available for host calling</li>
                </ul>
            </div>
        </div>

        <div class="howzzy-field space-y-2">
            <label for="num_tickets" class="block text-sm font-semibold text-foreground">Ticket capacity <span aria-hidden="true">*</span></label>
            {% set max_allowed = max_tickets | default(value=settings.max_tickets | default(value=600)) %}
            <input type="number" id="num_tickets" name="num_tickets" value="10" min="1" max="{{ max_allowed }}" required>
            <small class="block text-sm leading-relaxed text-muted" data-howzzy-help id="facilityFeeHelp">
                Platform facility fee for this session: {{ currency_symbol }}<span id="facilityFeeAmount">{{ offline_facility_fee | default(value=1) }}</span>.
                Ticket count sets capacity only (max {{ max_allowed }}).
            </small>
        </div>

        <div class="howzzy-field space-y-2">
            <label for="template_id" class="block text-sm font-semibold text-foreground">Ticket template <span aria-hidden="true">*</span></label>
            <select id="template_id" name="template_id" required>
                <option value="">Select a template...</option>
                {% for template in templates %}
                <option value="{{ template.id }}"
                    {% if template.coordinate_map and template.coordinate_map != "[]" and template.coordinate_map != "" %}data-is-custom="true"{% endif %}
                    {% if template.name == "Classic Ticket" %}data-is-classic="true"{% endif %}
                    {% if template.name == "Classic Ticket" or template.is_default %}selected{% endif %}>{{ template.name }}{% if template.name == "Classic Ticket" %} (Online default){% elif template.is_default %} (Default){% endif %}</option>
                {% endfor %}
            </select>
            <p id="template-hint" class="text-sm text-brand" aria-live="polite" hidden></p>
            <small class="block text-sm leading-relaxed text-muted" data-howzzy-help id="template-help">Choose the play-sheet design for this offline session.</small>
        </div>

        <fieldset class="howzzy-field space-y-3">
            <legend class="text-sm font-semibold text-foreground">Generation method</legend>
            <div class="space-y-3">
                <label for="gen_smart" class="flex cursor-pointer items-start gap-3 rounded-xl border border-divider bg-canvas p-4 transition hover:border-brand">
                    <input class="mt-1 h-4 w-4 accent-brand" type="radio" name="generation_method" id="gen_smart" value="smart" checked>
                    <span>
                        <span class="block font-semibold text-foreground">Prize-aware generation</span>
                        <span class="mt-1 block text-sm text-muted">Balances sheets so configured prize budgets can be met. Preferred for small sessions.</span>
                    </span>
                </label>
                <label for="gen_random" class="flex cursor-pointer items-start gap-3 rounded-xl border border-divider bg-canvas p-4 transition hover:border-brand">
                    <input class="mt-1 h-4 w-4 accent-brand" type="radio" name="generation_method" id="gen_random" value="random">
                    <span>
                        <span class="block font-semibold text-foreground">Fully random</span>
                        <span class="mt-1 block text-sm text-muted">Sheets are generated randomly. Prize outcomes are not pre-balanced.</span>
                    </span>
                </label>
            </div>
        </fieldset>

        <div class="howzzy-field space-y-2">
            <label class="block text-sm font-semibold text-foreground">Prize budgeting</label>
            <small class="block text-sm leading-relaxed text-muted" data-howzzy-help>Select prizes and how many winners for each (game configuration, not a purchase)</small>
            <div id="prize-budget-container" class="flex flex-col gap-3"></div>
            <button type="button" onclick="addPrizeBudget()" class="btn btn-sm btn-secondary">+ Add Prize</button>
            <input type="hidden" name="prize_budgets" id="prize_budgets_json">
        </div>

        <div class="flex flex-col gap-3 border-t border-divider pt-6 sm:flex-row">
            <button type="submit" class="btn btn-primary w-full sm:w-auto">Create session</button>
            <a href="/plugins/howzzy/games_index" class="btn btn-secondary w-full sm:w-auto">Cancel</a>
        </div>
        <p id="game-form-feedback" class="rounded-lg border border-divider bg-canvas p-3 text-sm" role="status" aria-live="polite" hidden></p>
    </form>
</main>

<div id="game-page-data"
     data-prizes="{{ prizes | json_encode }}"
     data-app-name="{{ app_name }}"
     data-currency-symbol="{{ currency_symbol }}"
     data-offline-fee="{{ offline_facility_fee | default(value=1) }}"
     data-online-fee="{{ online_facility_fee | default(value=1) }}">
</div>
{% endblock %}

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