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

{% block title %}Connexion Administration{% endblock %}

{% block body %}

    <div class="min-h-screen bg-slate-950 flex flex-col justify-center px-6 py-12 lg:px-8">

        ```
        <div class="sm:mx-auto sm:w-full sm:max-w-sm">
            <img
                src="/assets/img/logo.webp"
                alt="TGC Studios"
                class="mx-auto h-16 w-auto"
            >

            <h2 class="mt-10 text-center text-3xl font-bold tracking-tight text-white">
                Administration TGC Studios
            </h2>

            <p class="mt-2 text-center text-sm text-slate-400">
                Connectez-vous à votre espace d'administration
            </p>
        </div>

        <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">

            {% if error %}
                <div class="mb-6 rounded-lg border border-red-500/20 bg-red-500/10 p-4 text-sm text-red-300">
                    {{ error.messageKey|trans(error.messageData, 'security') }}
                </div>
            {% endif %}

            {% if app.user %}
                <div class="mb-6 rounded-lg border border-emerald-500/20 bg-emerald-500/10 p-4 text-sm text-emerald-300">
                    Connecté en tant que {{ app.user.userIdentifier }}

                    <a
                        href="{{ path('app_logout') }}"
                        class="ml-2 underline"
                    >
                        Déconnexion
                    </a>
                </div>
            {% endif %}

            <form method="post" class="space-y-6">

                <div>
                    <label
                        for="inputEmail"
                        class="block text-sm font-medium text-slate-100"
                    >
                        Adresse email
                    </label>

                    <div class="mt-2">
                        <input
                            id="inputEmail"
                            type="email"
                            name="email"
                            value="{{ last_username }}"
                            autocomplete="email"
                            required
                            autofocus
                            class="block w-full rounded-xl border border-slate-700 bg-slate-900 px-4 py-3 text-white placeholder:text-slate-500 focus:border-emerald-500 focus:outline-none"
                        >
                    </div>
                </div>

                <div>
                    <label
                        for="inputPassword"
                        class="block text-sm font-medium text-slate-100"
                    >
                        Mot de passe
                    </label>

                    <div class="mt-2">
                        <input
                            id="inputPassword"
                            type="password"
                            name="password"
                            autocomplete="current-password"
                            required
                            class="block w-full rounded-xl border border-slate-700 bg-slate-900 px-4 py-3 text-white placeholder:text-slate-500 focus:border-emerald-500 focus:outline-none"
                        >
                    </div>
                </div>

                <input
                    type="hidden"
                    name="_csrf_token"
                    value="{{ csrf_token('authenticate') }}"
                >

                <div class="flex items-center">
                    <input
                        id="remember"
                        type="checkbox"
                        name="_remember_me"
                        class="h-4 w-4 rounded border-slate-600 bg-slate-800 text-emerald-500"
                    >

                    <label
                        for="remember"
                        class="ml-2 text-sm text-slate-300"
                    >
                        Se souvenir de moi
                    </label>
                </div>

                <button
                    type="submit"
                    class="flex w-full justify-center rounded-xl bg-emerald-600 px-4 py-3 text-sm font-semibold text-white transition hover:bg-emerald-500"
                >
                    Se connecter
                </button>

            </form>
        </div>
        ```

    </div>
{% endblock %}