{# ========================================
   ADMIN LOGIN
   Formulaire de connexion back-office
   ======================================== #}
{% extends 'base.twig' %}

{% block title %}Login admin - Nautiloc{% endblock %}

{% block content %}
<section class="mx-auto max-w-md rounded-2xl border-4 border-abyss-900 bg-white p-6 shadow-[6px_6px_0_0_#041824]">
    <h1 class="text-2xl font-black uppercase">Connexion admin</h1>
    <p class="mt-2 text-sm font-semibold">Back-office nautique, accès réservé à l'équipage.</p>

    {% if error %}
        <div class="mt-4 rounded-lg border-2 border-red-700 bg-red-100 px-4 py-3 text-sm font-semibold">{{ error }}</div>
    {% endif %}

    <form method="post" class="mt-5 space-y-4">
        <div>
            <label class="mb-1 block text-xs font-black uppercase tracking-wider">Login</label>
            <input type="text" name="login" class="w-full rounded-lg border-2 border-abyss-900 bg-sand-100 px-3 py-2 text-sm font-semibold" required>
        </div>
        <div>
            <label class="mb-1 block text-xs font-black uppercase tracking-wider">Mot de passe</label>
            <input type="password" name="password" class="w-full rounded-lg border-2 border-abyss-900 bg-sand-100 px-3 py-2 text-sm font-semibold" required>
        </div>
        <button type="submit" class="w-full rounded-lg border-2 border-abyss-900 bg-abyss-900 px-4 py-2 text-sm font-black uppercase text-white shadow-[4px_4px_0_0_#ff6b57]">Se connecter</button>
    </form>

</section>
{% endblock %}