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

{% set seo_title = 'Connexion — administration du Jardin de Bohème' %}

{% block meta %}<meta name="robots" content="noindex, nofollow">{% endblock %}

{% block body %}
    <div class="mx-auto flex max-w-md flex-col justify-center px-4 py-24">
        <h1 class="font-serif text-3xl text-ink">Administration</h1>
        <p class="mt-3 font-sans text-[0.9rem] text-muted">Réservé à la pépinière.</p>

        {% if error %}
            <p class="mt-8 rounded-lg border border-stock-out/40 bg-surface-tint px-5 py-4 font-sans text-[0.88rem] text-stock-out">
                Adresse ou mot de passe incorrect.
            </p>
        {% endif %}

        <form method="post" class="mt-8 space-y-5">
            <div>
                <label for="username" class="block font-sans text-[0.82rem] font-semibold text-muted">Adresse</label>
                <input type="email" id="username" name="_username" value="{{ lastUsername }}" autocomplete="username" required autofocus
                       class="mt-2 w-full rounded-lg border border-line bg-surface px-4 py-3 font-sans text-[0.95rem] text-ink">
            </div>
            <div>
                <label for="password" class="block font-sans text-[0.82rem] font-semibold text-muted">Mot de passe</label>
                <input type="password" id="password" name="_password" autocomplete="current-password" required
                       class="mt-2 w-full rounded-lg border border-line bg-surface px-4 py-3 font-sans text-[0.95rem] text-ink">
            </div>
            <label class="flex items-center gap-2 font-sans text-[0.85rem] text-muted">
                <input type="checkbox" name="_remember_me" class="h-4 w-4 accent-[var(--color-brand-cta)]">
                Rester connecté sur cet ordinateur
            </label>
            <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
            <button type="submit" class="w-full rounded-full bg-brand-cta px-6 py-3.5 font-sans text-sm font-semibold text-white transition hover:bg-brand-ink">Se connecter</button>
        </form>
    </div>
{% endblock %}