{% extends "base.html" %}
{% block page_title %}Generate PDF - {{ game.name }}{% endblock %}

{% block content %}
<main class="mx-auto w-full max-w-7xl px-4 py-6 text-foreground sm:px-6 lg:px-8">
    <section class="pdf-container space-y-6 rounded-2xl border border-divider bg-surface p-4 shadow-sm sm:p-6 lg:p-8"
        data-game-id="{{ game.id | default(value=0) }}"
        data-tickets="{{ tickets | json_encode }}"
        data-template="{{ template | json_encode }}">
        <header class="flex flex-col gap-3 border-b border-divider pb-5 sm:flex-row sm:items-start sm:justify-between">
            <div>
                <p class="text-sm font-medium text-brand">Howzzy print studio</p>
                <h1 class="mt-1 text-2xl font-bold tracking-tight sm:text-3xl">Prepare play sheets</h1>
                <p class="mt-2 text-muted">{{ game.name }} · Capacity: {{ tickets | length }} play sheets</p>
                <p class="mt-1 text-sm text-muted">The platform fee covers tooling use, not ticket sales.</p>
            </div>
            <span class="inline-flex w-fit items-center rounded-full bg-brand/10 px-3 py-1 text-sm font-semibold text-brand">PDF facility</span>
        </header>

        <section aria-labelledby="pdf-options-title">
            <h2 id="pdf-options-title" class="mb-3 text-lg font-semibold">Page layout</h2>
            <div class="settings-grid grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
                <div class="space-y-2">
                    <label for="paperSizeSelect" class="block text-sm font-medium text-foreground">Paper size</label>
                    <select id="paperSizeSelect" class="form-control" onchange="updatePdfPreview()">
                        <option value="a4" selected>A4</option>
                        <option value="a3">A3</option>
                        <option value="letter">Letter</option>
                        <option value="legal">Legal</option>
                    </select>
                </div>
                <div class="space-y-2">
                    <label for="colsInput" class="block text-sm font-medium text-foreground">Sheets per row</label>
                    <input type="number" id="colsInput" class="form-control" value="2" min="1" max="5" onchange="updatePdfPreview()">
                </div>
                <div class="space-y-2">
                    <label for="marginInput" class="block text-sm font-medium text-foreground">Page margin (mm)</label>
                    <input type="number" id="marginInput" class="form-control" value="10" min="0" max="50" onchange="updatePdfPreview()">
                </div>
                <div class="space-y-2">
                    <label for="gapInput" class="block text-sm font-medium text-foreground">Gap between sheets (mm)</label>
                    <input type="number" id="gapInput" class="form-control" value="5" min="0" max="20" onchange="updatePdfPreview()">
                </div>
                <input type="hidden" id="modeSelect" value="vector">
            </div>
        </section>

        <div class="stats-box rounded-xl border border-divider bg-canvas p-4 text-center font-medium text-brand" id="pdfStats" role="status" aria-live="polite">
            Calculating page layout…
        </div>

        <section class="preview-container space-y-3" aria-labelledby="pdf-preview-title">
            <div>
                <h2 id="pdf-preview-title" class="text-lg font-semibold">Layout preview</h2>
                <p class="text-sm text-muted">Preview of one page using the current settings.</p>
            </div>
            <div class="canvas-wrapper flex min-h-80 items-center justify-center overflow-auto rounded-xl border border-divider bg-canvas p-3 sm:p-5">
                <canvas id="pdfPreviewCanvas" class="h-auto max-w-full rounded bg-white shadow-lg" role="img" aria-label="Preview of play sheets on a PDF page"></canvas>
            </div>
        </section>

        <section class="progress-section space-y-2 rounded-xl border border-divider bg-canvas p-4" id="pdfProgress" aria-labelledby="pdf-progress-title" hidden>
            <div class="flex items-center justify-between gap-3">
                <h2 id="pdf-progress-title" class="font-semibold">Generating PDF…</h2>
                <span id="pdfPercent" class="text-sm font-semibold tabular-nums">0%</span>
            </div>
            <div class="h-3 overflow-hidden rounded-full bg-divider" role="progressbar" aria-label="PDF generation progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
                <div class="progress-bar-fill h-full w-0 rounded-full bg-brand transition-[width]" id="pdfProgressBar"></div>
            </div>
        </section>

        <div id="pdfFeedback" class="blocks-workspace-notice" role="status" aria-live="polite" tabindex="-1" hidden></div>

        <footer class="footer flex flex-col-reverse gap-3 border-t border-divider pt-5 sm:flex-row sm:justify-end">
            <a href="/plugins/howzzy/games_index" class="blocks-button blocks-button-secondary justify-center">Cancel</a>
            <button type="button" class="blocks-button blocks-button-primary justify-center" onclick="generatePdf()" id="generateBtn">Download PDF</button>
        </footer>
    </section>
</main>
{% endblock %}

{% block scripts %}
<script src="/plugins/howzzy/assets/js/ticket-utils.js"></script>
<script src="/plugins/howzzy/assets/js/ticket-renderer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="/plugins/howzzy/assets/js/pdf-generator.js"></script>
<script src="/plugins/howzzy/assets/js/print-page.js"></script>
{% endblock %}