{% extends "base.html" %}
{% block page_title %}My Ticket Templates{% endblock %}

{% block content %}
<main class="mx-auto w-full max-w-7xl px-4 py-6 text-foreground sm:px-6 lg:px-8">
    <header class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
        <div><p class="text-sm font-medium text-brand">Howzzy</p><h1 class="mt-1 text-2xl font-bold tracking-tight sm:text-3xl">My Ticket Templates</h1><p class="mt-2 max-w-2xl text-sm text-muted">Choose a design for your sessions or create one that fits your event.</p></div>
        <a href="/plugins/howzzy/templates_new" class="blocks-button blocks-button-primary w-full sm:w-auto">Create template</a>
    </header>

    {% if templates %}
    <section class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3" aria-label="Ticket templates">
        {% for template in templates %}
        <article class="flex min-w-0 flex-col overflow-hidden rounded-2xl border border-divider bg-surface shadow-sm">
            <div class="flex min-h-44 items-center justify-center overflow-hidden bg-canvas p-4">
                <canvas class="preview-canvas h-auto max-h-36 max-w-full" data-template-id="{{ template.id }}" data-template="{{ template | json_encode }}" aria-label="Preview of {{ template.name }}"></canvas>
            </div>
            <div class="flex flex-1 flex-col p-4">
                <h2 class="flex flex-wrap items-center gap-2 text-lg font-semibold">{{ template.name }} {% if template.is_default %}<span class="blocks-status-pill is-info">Default</span>{% endif %}</h2>
                {% if template.description %}<p class="mt-2 line-clamp-3 text-sm leading-relaxed text-muted">{{ template.description }}</p>{% else %}<p class="mt-2 text-sm text-muted">A ready-to-use ticket design.</p>{% endif %}
                <div class="mt-auto flex flex-col gap-2 pt-5 sm:flex-row">
                    {% if template.user_id != 0 %}<a href="/plugins/howzzy/templates/edit/{{ template.id }}" class="blocks-button blocks-button-primary blocks-button-sm w-full sm:w-auto">Edit</a>{% endif %}
                    <form method="post" action="/plugins/howzzy/templates/duplicate/{{ template.id }}" class="w-full sm:w-auto"><button type="submit" class="blocks-button blocks-button-secondary blocks-button-sm w-full">Duplicate</button></form>
                    {% if not template.is_default %}<form method="post" action="/plugins/howzzy/templates/delete/{{ template.id }}" class="w-full sm:w-auto" onsubmit="return confirm('Delete this template?')"><button type="submit" class="blocks-button blocks-button-danger blocks-button-sm w-full">Delete</button></form>{% endif %}
                </div>
            </div>
        </article>
        {% endfor %}
    </section>
    {% else %}
    <section class="rounded-2xl border border-dashed border-divider bg-surface px-5 py-12 text-center sm:py-16" aria-labelledby="templates-empty-title">
        <span class="mx-auto flex size-14 items-center justify-center rounded-2xl bg-brand/10 text-2xl text-brand" aria-hidden="true">🎫</span>
        <h2 id="templates-empty-title" class="mt-4 text-xl font-semibold">No templates yet</h2>
        <p class="mx-auto mt-2 max-w-md text-sm text-muted">Create your first ticket design to personalize the play sheets in your sessions.</p>
        <a href="/plugins/howzzy/templates_new" class="blocks-button blocks-button-primary mt-6">Create your first template</a>
    </section>
    {% endif %}
</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="/plugins/howzzy/assets/js/ticket-template-previews.js"></script>
{% endblock %}