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

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

{% block body %}
<div class="row justify-content-center" style="margin-top:60px;">
    <div class="col-md-4 col-sm-10">
        <div style="background:var(--warm-white);border:1.5px solid var(--cream-border);border-radius:16px;padding:36px;">

            <div style="text-align:center;margin-bottom:28px;">
                <div style="width:52px;height:52px;background:var(--petrol);border-radius:14px;
                            display:inline-flex;align-items:center;justify-content:center;
                            font-size:24px;margin-bottom:14px;">🍽️</div>
                <h1 style="font-size:22px;margin-bottom:4px;">Nos Recettes</h1>
                <p style="font-size:13px;color:var(--text-light);margin:0;">Connecte-toi pour accéder à tes recettes</p>
            </div>

            {% if error %}
                <div style="background:rgba(192,64,42,0.1);color:#922a1a;border-radius:8px;
                            padding:10px 14px;font-size:13px;margin-bottom:16px;display:flex;gap:8px;align-items:center;">
                    <i class="bi bi-exclamation-triangle"></i>
                    {{ error.messageKey|trans(error.messageData, 'security') }}
                </div>
            {% endif %}

            {% if app.user %}
                <div style="background:rgba(42,107,124,0.1);color:var(--petrol-dark);border-radius:8px;
                            padding:10px 14px;font-size:13px;margin-bottom:16px;">
                    Connecté en tant que {{ app.user.userIdentifier }}.
                    <a href="{{ logout_path() }}" style="color:var(--petrol);">Se déconnecter</a>
                </div>
            {% endif %}

            <form method="post">
                <div style="margin-bottom:16px;">
                    <label style="font-size:13px;font-weight:500;color:var(--text-mid);display:block;margin-bottom:5px;">
                        Email
                    </label>
                    <input type="email" name="_username" id="username" value="{{ last_username }}"
                           class="form-control" autocomplete="email" required autofocus>
                </div>
                <div style="margin-bottom:24px;">
                    <label style="font-size:13px;font-weight:500;color:var(--text-mid);display:block;margin-bottom:5px;">
                        Mot de passe
                    </label>
                    <input type="password" name="_password" id="password"
                           class="form-control" autocomplete="current-password" required>
                </div>
                <input type="hidden" name="_csrf_token" data-controller="csrf-protection"
                       value="{{ csrf_token('authenticate') }}">
                <button type="submit" class="btn-petrol" style="width:100%;justify-content:center;padding:10px;">
                    <i class="bi bi-box-arrow-in-right"></i> Se connecter
                </button>
            </form>

            <div style="border-top:1px solid var(--cream-border);margin-top:24px;padding-top:20px;text-align:center;">
                <p style="font-size:13px;color:var(--text-light);margin:0;">
                    Pas encore de compte ?
                    <a href="{{ path('app_register') }}" style="color:var(--petrol);font-weight:500;">Créer un compte</a>
                </p>
            </div>

        </div>
    </div>
</div>
{% endblock %}