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

{% block title %}Login | Dart Board{% endblock %}

{% block mainClasses %}
{#    my-12#}
{% endblock %}

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

    {% set panelClass = 'mx-auto w-full max-w-[460px] 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 inputClass = 'w-full rounded-[10px] border border-[#42566d] bg-[#0f1824] px-[0.78rem] py-[0.72rem] text-sm text-[#f6f3e8] outline-none transition placeholder:text-[#7f91a7] focus:border-[#1f9d62] focus:ring-2 focus:ring-[#1f9d62]/25' %}
    {% set buttonClass = 'inline-flex cursor-pointer items-center justify-center rounded-[10px] border border-[#1f9d62] bg-[#1f9d62] px-[0.95rem] py-[0.65rem] text-sm font-bold text-[#f7f2dc] transition hover:border-[#16714a] hover:bg-[#16714a] disabled:cursor-not-allowed disabled:opacity-60' %}

    <section class="{{ panelClass }}" x-data="login()">
        <h1 class="m-0 font-space text-[#f6f3e8]">Login</h1>
        <p class="mt-[0.4rem] text-[#aab4c3]">Melde dich an, um Spiele zu erstellen und zu verwalten.</p>

        <div x-cloak x-show="errorMessage" class="mt-4 rounded-xl border border-[#b53d52] bg-[#37121a] px-4 py-3 font-semibold text-[#ffd6dd]" x-text="errorMessage"></div>

        <form class="mt-4 grid gap-4" @submit.prevent="submit()">
            <input type="email" class="{{ inputClass }}" x-model.trim="email" placeholder="E-Mail" autocomplete="email" required>
            <input type="password" class="{{ inputClass }}" x-model="password" placeholder="Passwort" autocomplete="current-password" required>
            <button type="submit" class="{{ buttonClass }}" :disabled="isSubmitting" x-text="isSubmitting ? 'Anmeldung...' : 'Anmelden'"></button>
        </form>

{#        <p class="mt-5 text-[#aab4c3]">#}
{#            Noch kein Konto?#}
{#            <a class="font-bold text-[#d8a64a] transition hover:text-[#e8ba65]" href="{{ path('auth_register', next ? { next: next } : {}) }}">Registrieren</a>#}
{#        </p>#}
    </section>

    <input type="hidden" id="auth-next" value="{{ next }}">
{% endblock %}
