{% extends 'base.html.twig' %}

{% block title %}Modus wählen | Dart Board{% endblock %}

{% block body %}
    {{ encore_entry_script_tags('home', null) }}

    {% set panelClass = 'rounded-[18px] border border-[#314254] bg-[linear-gradient(160deg,#182334,#121c29)] p-[1.2rem] shadow-[0_16px_36px_rgba(0,0,0,0.35)]' %}
    {% set headingClass = 'm-0 font-space text-[#f6f3e8]' %}
    {% set paragraphClass = 'mt-[0.4rem] text-[#aab4c3]' %}
    {% set scrollableClass = 'max-h-[12rem] overflow-y-auto [&::-webkit-scrollbar]:[width:6px] [&::-webkit-scrollbar-thumb]:bg-gray-400 overflow-y-auto [&::-webkit-scrollbar-thumb]:[border-radius:3px]' %}

    <div x-data="home">
        <template x-if="loading">
            <div class="{{ panelClass }}">
                <p class="{{ paragraphClass }}">Daten werden geladen...</p>
            </div>
        </template>

        <template x-if="errorMessage && !loading">
            <div class="rounded-xl border border-[#b53d52] bg-[#37121a] px-4 py-3 font-semibold text-[#ffd6dd]" x-text="errorMessage"></div>
        </template>

        <template x-if="!loading && !errorMessage">
            <div class="grid gap-4">
                <section class="{{ panelClass }}">
                    <h1 class="{{ headingClass }}">Deine Spiele</h1>
                    <p class="{{ paragraphClass }}">Hier siehst du laufende, abgebrochene und abgeschlossene Spiele.</p>
                </section>

                <section class="grid gap-4 [grid-template-columns:repeat(auto-fit,minmax(240px,1fr))]">
                    <article class="{{ panelClass }}">
                        <h2 class="{{ headingClass }}">Laufend</h2>
                        <ul class="mt-1.5 pt-1 grid list-none gap-[0.6rem] p-0 {{ scrollableClass }}">
                            <template x-for="game in runningGames" :key="game.id">
                                <li>
                                    <a :href="'/games/' + game.id" class="grid gap-[0.2rem] rounded-xl border border-[#34506a] bg-[#132133] px-3 py-[0.65rem] text-inherit no-underline transition hover:-translate-y-0.5 hover:border-[#2aa36a] hover:bg-[#173047]">
                                        <strong class="text-[#f6f3e8]" x-text="game.mode.name"></strong>
                                        <small class="text-[#8ea2bb]" x-text="'Gestartet: ' + new Date(game.startedAt || game.createdAt).toLocaleString('de-DE')"></small>
                                    </a>
                                </li>
                            </template>
                            <li x-show="runningGames.length === 0" class="text-[0.92rem] text-[#8ea2bb]">Keine laufenden Spiele.</li>
                        </ul>
                    </article>

                    <article class="{{ panelClass }}">
                        <h2 class="{{ headingClass }}">Abgebrochen</h2>
                        <ul class="mt-1.5 pt-1 grid list-none gap-[0.6rem] p-0 {{ scrollableClass }}">
                            <template x-for="game in abortedGames" :key="game.id">
                                <li>
                                    <a :href="'/games/' + game.id" class="grid gap-[0.2rem] rounded-xl border border-[#513549] bg-[#2b1826] px-3 py-[0.65rem] text-inherit no-underline transition hover:-translate-y-0.5 hover:border-[#b53d52] hover:bg-[#3a1f2f]">
                                        <strong class="text-[#f6f3e8]" x-text="game.mode.name"></strong>
                                        <small class="text-[#c5a8b6]" x-text="'Beendet: ' + new Date(game.finishedAt || game.updatedAt).toLocaleString('de-DE')"></small>
                                    </a>
                                </li>
                            </template>
                            <li x-show="abortedGames.length === 0" class="text-[0.92rem] text-[#c5a8b6]">Keine abgebrochenen Spiele.</li>
                        </ul>
                    </article>

                    <article class="{{ panelClass }}">
                        <h2 class="{{ headingClass }}">Vergangene Spiele</h2>
                        <ul class="mt-1.5 pt-1 grid list-none gap-[0.6rem] p-0 {{ scrollableClass }}">
                            <template x-for="game in finishedGames" :key="game.id">
                                <li>
                                    <a :href="'/games/' + game.id" class="grid gap-[0.2rem] rounded-xl border border-[#4d4730] bg-[#282314] px-3 py-[0.65rem] text-inherit no-underline transition hover:-translate-y-0.5 hover:border-[#d8a64a] hover:bg-[#332b17]">
                                        <strong class="text-[#f6f3e8]" x-text="game.mode.name"></strong>
                                        <small class="text-[#d2c28f]" x-text="'Beendet: ' + new Date(game.finishedAt || game.updatedAt).toLocaleString('de-DE')"></small>
                                    </a>
                                </li>
                            </template>
                            <li x-show="finishedGames.length === 0" class="text-[0.92rem] text-[#d2c28f]">Noch keine abgeschlossenen Spiele.</li>
                        </ul>
                    </article>
                </section>

                <section class="grid gap-y-4 mt-12">
                    <div class="{{ panelClass }}">
                        <h1 class="{{ headingClass }}">Neues Dart-Spiel</h1>
                        <p class="{{ paragraphClass }}">Wähle einen Spielmodus und erfasse danach die Spieler.</p>
                    </div>

                    <div class="grid gap-12 [grid-template-columns:repeat(auto-fit,minmax(180px,1fr))]">
                        <template x-for="mode in modes" :key="mode.id">
                            <a :href="'/games/new?mode=' + mode.key" class="relative grid overflow-hidden rounded-[14px] border border-[#394a5c] bg-[linear-gradient(155deg,#1a2636,#101926)] p-4 text-inherit no-underline transition duration-200 hover:-translate-y-0.5 hover:border-[#d8a64a] hover:shadow-[0_14px_24px_rgba(0,0,0,0.45)]">
                                <span class="pointer-events-none absolute right-0 top-0 h-8 w-14 rounded-bl-full bg-[#1f9d62]/35"></span>
                                <span class="text-[0.72rem] uppercase tracking-[0.1em] text-[#d6cbab]" x-text="mode.type"></span>
                                <strong class="font-space text-[1.6rem] text-[#f6f3e8]" x-text="mode.name"></strong>
                                <small class="text-[#a8b2c0]" x-text="mode.type === 'ATW' ? 'Ziele 1-20 + Bull' : ('Startscore ' + mode.startScore)"></small>
                            </a>
                        </template>
                        <div x-show="modes.length === 0" class="{{ panelClass }}">
                            Keine Spielmodi verfügbar.
                        </div>
                    </div>
                </section>
            </div>
        </template>
    </div>
{% endblock %}
