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

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

{% block body %}
    <style>
        .login-shell {
            display: grid;
            gap: 18px;
            max-width: 760px;
        }

        .login-card,
        .login-note {
            border: 1px solid var(--panel-border);
            border-radius: 22px;
            background: rgba(255, 255, 255, 0.78);
            padding: 24px;
        }

        .login-note {
            background:
                radial-gradient(circle at top right, rgba(31, 111, 95, 0.1), transparent 36%),
                rgba(246, 244, 238, 0.82);
        }

        .login-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 14px;
        }
    </style>

    <div class="topline">
        <p class="muted">Migration Symfony 8</p>
        <h1>Connexion</h1>
        <p class="muted">Accède à ton espace conseiller ou client avec les identifiants qui t’ont été transmis.</p>
    </div>

    <div class="login-shell">
        <section class="login-card">
            {% if error %}
                <div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
            {% endif %}

            {% if app.user %}
                <div class="alert">
                    Connecte en tant que <strong>{{ app.user.userIdentifier }}</strong>.
                </div>
            {% endif %}

            <form method="post" class="stack">
                <div class="field">
                    <label for="username">Nom d'utilisateur</label>
                    <input
                        type="text"
                        id="username"
                        name="username"
                        value="{{ last_username }}"
                        autocomplete="username"
                        required
                        autofocus
                    >
                </div>

                <div class="field">
                    <label for="password">Mot de passe</label>
                    <input
                        type="password"
                        id="password"
                        name="password"
                        autocomplete="current-password"
                        required
                    >
                </div>

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

                <button type="submit">Se connecter</button>
            </form>
        </section>

        <aside class="login-note">
            <p class="muted">Pas encore de compte ?</p>
            <h2>La création d’accès n’est pas publique.</h2>
            <p class="muted">
                Les comptes sont ouverts par un conseiller ou par l’équipe interne, afin de garder un accès maîtrisé aux dossiers clients.
            </p>
            <div class="login-actions">
                <a href="{{ path('app_register') }}" class="button-link">Créer un compte</a>
                <a href="{{ path('app_onboarding_index') }}" class="button-link secondary">Découvrir l’onboarding</a>
            </div>
            <p class="muted" style="margin-top: 12px;">
                Si tu préfères, tu peux aussi demander un accès à ton conseiller ou à l’administrateur de la plateforme.
            </p>
        </aside>
    </div>
{% endblock %}