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

{% block content %}
<main class="mx-auto w-full max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
    <header class="mb-6 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">My Sessions</h1>
            <p class="mt-1 text-sm text-muted">Manage your hosted play and print/PDF sessions.</p>
        </div>
        <a href="/plugins/howzzy/games_new" class="btn btn-primary self-start sm:self-auto">+ Create Session</a>
    </header>

    <nav aria-label="Session status" class="blocks-filter-tabs w-full overflow-x-auto border-b border-divider">
        <a href="/plugins/howzzy/games_index?status=active" class="blocks-filter-tab {% if status_filter == 'active' %}active{% endif %}" {% if status_filter == 'active' %}aria-current="page"{% endif %}>Active</a>
        <a href="/plugins/howzzy/games_index?status=completed" class="blocks-filter-tab {% if status_filter == 'completed' %}active{% endif %}" {% if status_filter == 'completed' %}aria-current="page"{% endif %}>Completed</a>
    </nav>

    {% if games %}
    <section class="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3" id="gameGrid" aria-label="Your Howzzy sessions">
        {% for game in games %}
        <article class="flex min-w-0 flex-col overflow-hidden rounded-xl border border-divider bg-surface shadow-sm transition duration-200 hover:-translate-y-1 hover:shadow-lg {% if game.game_type == 'online' %}border-l-4 border-l-brand{% else %}border-l-4 border-l-success{% endif %}">
            <div class="flex flex-1 flex-col p-4 sm:p-5">
                <div class="mb-3 flex flex-wrap items-center justify-between gap-2">
                    {% if game.game_type == 'online' %}
                    <span class="blocks-status-pill is-info"><i class="fas fa-globe mr-1" aria-hidden="true"></i>Online</span>
                    {% else %}
                    <span class="blocks-status-pill is-success"><i class="fas fa-print mr-1" aria-hidden="true"></i>Offline</span>
                    {% endif %}
                    {% if game.status == 'in_progress' %}
                    <span class="blocks-status-pill is-info">In progress</span>
                    {% elif game.status == 'completed' %}
                    <span class="blocks-status-pill is-success">Completed</span>
                    {% elif game.status == 'generating' %}
                    <span class="blocks-status-pill is-warning">Preparing</span>
                    {% else %}
                    <span class="blocks-status-pill is-neutral">{{ game.status | replace(from="_", to=" ") | title }}</span>
                    {% endif %}
                </div>

                <h2 class="break-words text-lg font-semibold text-foreground">{{ game.name }}</h2>
                <p class="mt-1 break-all text-xs text-muted">Session ID: {{ game.join_token | default(value=game.id) }}</p>
                <p class="mt-4 text-sm text-muted"><span class="font-semibold text-foreground">{{ game.num_tickets }}</span> play sheets available</p>

                <div class="mt-auto flex flex-col gap-2 pt-5 sm:flex-row">
                    <a href="/plugins/howzzy/games_show/{{ game.id }}" class="btn btn-sm btn-primary w-full sm:flex-1">Open session</a>
                    {% if game.game_type == 'online' %}
                    <a href="/plugins/howzzy/games_announcer/{{ game.id }}" class="btn btn-sm btn-secondary w-full sm:w-auto">Announcer</a>
                    {% else %}
                    <a href="/plugins/howzzy/print/{{ game.id }}" class="btn btn-sm btn-secondary w-full sm:w-auto"><i class="fas fa-file-pdf mr-1" aria-hidden="true"></i>PDF</a>
                    {% endif %}
                </div>
            </div>
        </article>
        {% endfor %}
    </section>

    <div id="loadingIndicator" class="mt-8 flex flex-col items-center gap-3 py-8 text-sm text-muted" role="status" aria-live="polite" hidden>
        <span class="h-8 w-8 animate-spin rounded-full border-4 border-divider border-t-brand" aria-hidden="true"></span>
        <span>Loading more sessions…</span>
    </div>
    <p id="noMoreGames" class="py-8 text-center text-sm italic text-muted" role="status" {% if has_more %}hidden{% endif %}>No more sessions to show.</p>
    {% else %}
    <section class="blocks-empty-state blocks-empty-state-container mt-8 rounded-2xl border-2 border-dashed border-divider bg-surface px-4 py-10 text-center sm:px-8" aria-labelledby="empty-sessions-title">
        <span class="text-4xl" aria-hidden="true">🎲</span>
        <h2 id="empty-sessions-title" class="text-xl font-semibold text-foreground">No sessions found</h2>
        <p class="max-w-xl text-sm text-muted">You don’t have any {{ status_filter }} sessions yet.</p>
        {% if status_filter == 'active' %}
        <a href="/plugins/howzzy/games_new" class="btn btn-primary mt-3">Create your first session</a>
        {% else %}
        <a href="/plugins/howzzy/games_index?status=active" class="btn btn-secondary mt-3">View active sessions</a>
        {% endif %}
    </section>
    {% endif %}
</main>

<div id="games-page-data"
     data-current-page="{{ current_page | default(value=1) }}"
     data-has-more="{{ has_more | default(value=false) | json_encode }}"
     data-status-filter="{{ status_filter | default(value='active') }}">
</div>
{% endblock %}

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