{% extends 'layout/auth.html.twig' %}

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

{% block card %}
    <h1 class="text-xl font-semibold text-slate-900">Connexion</h1>
    <p class="mt-1 mb-6 text-sm text-slate-500">Accédez à votre espace de gestion des dossiers.</p>

    {{ include('components/_flashes.html.twig') }}

    {% if error %}
        <div class="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800" role="alert">
            {{ error.messageKey|trans(error.messageData, 'security') }}
        </div>
    {% endif %}

    <div data-controller="demo-login">
    <form method="post" action="{{ path('app_login') }}" data-turbo="false" data-demo-login-target="form">
        <div class="mb-5">
            <label for="username" class="form-label">Email</label>
            <input type="email" value="{{ last_username }}" name="_username" id="username" class="form-input" data-demo-login-target="email"
                   autocomplete="email" required autofocus>
        </div>
        <div class="mb-6">
            <label for="password" class="form-label">Mot de passe</label>
            <input type="password" name="_password" id="password" class="form-input" data-demo-login-target="password" autocomplete="current-password" required>
        </div>

        <input type="hidden" name="_csrf_token" data-controller="csrf-protection" value="{{ csrf_token('authenticate') }}">

        <button class="btn btn-primary w-full" type="submit">Se connecter</button>
    </form>

    {% if app.environment == 'dev' %}
        {% set demo_accounts = [
            {email: 'devyayaly@gmail.com', name: 'Yaya LY', role: 'Administrateur'},
            {email: 'elhadjiyayalywork@gmail.com', name: 'Gniame Diop', role: 'Comptable'},
            {email: 'yimalabstech@gmail.com', name: 'Rokhaya Faye', role: 'Dispatcher'},
            {email: 'hdcesn@gmail.com', name: 'Aminata Sow', role: 'Agent'},
            {email: 'khananekhtech@gmail.com', name: 'Babacar Ndiaye', role: 'Agent'},
            {email: '2abcorpgroup@gmail.com', name: 'Mariama Ba', role: 'Agent'},
        ] %}
        <div class="mt-6 rounded-lg border border-dashed border-accent-300 bg-accent-50 p-4">
            <p class="text-xs font-semibold uppercase tracking-wide text-accent-700">Comptes de test (dev)</p>
            <p class="mt-1 mb-3 text-xs text-slate-500">Mot de passe : <code class="font-mono">Welcome123@</code>. Cliquez pour vous connecter.</p>
            <ul class="space-y-1">
                {% for account in demo_accounts %}
                    <li>
                        <button type="button"
                                class="flex w-full items-center justify-between gap-3 rounded-md px-2 py-1.5 text-left text-sm hover:bg-white"
                                data-action="demo-login#fill"
                                data-email="{{ account.email }}" data-password="Welcome123@">
                            <span class="min-w-0">
                                <span class="block font-medium text-slate-800">{{ account.name }}</span>
                                <span class="block truncate text-xs text-slate-500">{{ account.email }}</span>
                            </span>
                            <span class="badge shrink-0">{{ account.role }}</span>
                        </button>
                    </li>
                {% endfor %}
            </ul>
        </div>
    {% endif %}
    </div>

    <p class="mt-6 text-center text-xs text-slate-500">
        Mot de passe oublié ? Contactez votre responsable : il vous enverra un mot de passe temporaire par email.
    </p>
{% endblock %}