<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>{% block title %}Dart Board{% endblock %}</title>
        <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221em%22 font-size=%2290%22>🎯</text></svg>">
        {% block stylesheets %}
            {{ encore_entry_link_tags('app', null) }}

            {% if app.environment == 'dev' %}
                {{ encore_entry_link_tags('debug', null) }}
            {% endif %}
        {% endblock %}
    </head>
    <body class="m-0 min-h-screen bg-[radial-gradient(1000px_480px_at_10%_-10%,rgba(23,133,82,0.3)_0,rgba(23,133,82,0)_58%),radial-gradient(980px_460px_at_95%_-8%,rgba(179,42,62,0.26)_0,rgba(179,42,62,0)_62%),linear-gradient(160deg,#0f141c_0%,#111a24_45%,#0b1016_100%)] font-manrope text-[#f6f3e8]">
        <header class="sticky top-0 z-20 border-b border-[#2d3948] bg-[rgba(13,19,27,0.8)] px-[1.4rem] py-4 backdrop-blur-[10px]" x-data="navbar">
            <div class="mx-auto flex w-[min(1200px,92vw)] items-center justify-between gap-4">
                <a class="font-space text-[1.2rem] font-bold tracking-[0.06em] text-[#f7f2dc] no-underline" :href="isLoggedIn ? '/' : '/login'">Dart Board</a>

                <nav class="flex items-center gap-3">
                    <template x-if="isLoggedIn">
                        <div class="flex items-center gap-3">
                            <a class="rounded-lg px-2 py-1 text-[0.92rem] font-bold text-[#e3dbc0] no-underline transition hover:bg-[#1c2734] hover:text-[#f7f2dc]" href="/">Start</a>
                            <a class="rounded-lg px-2 py-1 text-[0.92rem] font-bold text-[#e3dbc0] no-underline transition hover:bg-[#1c2734] hover:text-[#f7f2dc]" href="/games/new">Neues Spiel</a>
                            <span x-show="user && user.email" class="max-w-[240px] truncate rounded-lg border border-[#314054] bg-[#121a26] px-2 py-1 text-[0.86rem] font-semibold text-[#e3dbc0]" x-text="user && user.email ? user.email : ''"></span>
                            <button type="button" @click="logout()" class="inline-flex cursor-pointer items-center justify-center rounded-[10px] border border-[#3d4a5b] bg-[#162130] px-[0.95rem] py-[0.65rem] text-sm font-bold text-[#f6f3e8] transition hover:border-[#56657a] hover:bg-[#1e2b3d]">Logout</button>
                        </div>
                    </template>
{#                    <template x-if="!isLoggedIn">#}
{#                        <div class="flex items-center gap-3">#}
{#                            <a class="rounded-lg px-2 py-1 text-[0.92rem] font-bold text-[#e3dbc0] no-underline transition hover:bg-[#1c2734] hover:text-[#f7f2dc]" href="/login">Login</a>#}
{#                            <a class="rounded-lg px-2 py-1 text-[0.92rem] font-bold text-[#e3dbc0] no-underline transition hover:bg-[#1c2734] hover:text-[#f7f2dc]" href="/register">Registrierung</a>#}
{#                        </div>#}
{#                    </template>#}
                </nav>
            </div>
        </header>

        <main class="mx-auto my-[1.4rem] mb-8 grid w-[min(1200px,92vw)] gap-4 {% block mainClasses %}{% endblock mainClasses %}">
            {% block body %}
            {% endblock %}
        </main>
    </body>

    {% block javascripts %}
        {{ encore_entry_script_tags('app', null) }}
    {% endblock %}
</html>
