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

{% block title %}Connexion SPG - Espace administrateur{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('styles/login.css') }}">
{% endblock %}

{% block body %}
<div class="login-page">
    <div class="login-shell">
        <aside class="login-side" aria-hidden="true">
            <div class="login-side__brand">
                <img src="{{ asset('images/spg-logo.png') }}" alt="Logo SPG">
            </div>
            <div class="login-side__content">
                <span class="login-badge">Premier revendeur de pneus en Tunisie</span>
                <h1>L’expertise qui vous fait avancer</h1>
                <p>SPG, votre partenaire de confiance pour les pneus, les jantes et les services automobiles en Tunisie.</p>
            </div>
        </aside>

        <main class="login-form-panel" aria-labelledby="login-title">
            {% if app.user %}
                <div class="login-status">
                    Vous êtes connecté en tant que {{ app.user.userIdentifier }}.
                    <a href="{{ logout_path() }}">Me déconnecter</a>
                </div>
            {% endif %}

            <div class="login-box">
                <header class="login-box__header">
                    <span class="login-box__eyebrow">Bienvenue</span>
                    <h2 id="login-title">Connectez-vous à votre espace de gestion</h2>
                    <p class="login-note">Accès réservé au personnel autorisé</p>
                </header>

                {% if error %}
                    <div class="login-error" role="alert" aria-live="assertive">
                        {{ error.messageKey|trans(error.messageData, 'security') }}
                    </div>
                {% endif %}

                <form method="post" class="login-form">
                    <label for="username">Adresse e-mail</label>
                    <input type="email" id="username" name="_username" value="{{ last_username }}" autocomplete="email" required autofocus>

                    <label for="password">Mot de passe</label>
                    <div class="password-field">
                        <input type="password" id="password" name="_password" autocomplete="current-password" required>
                        <button type="button" class="password-toggle" data-password-toggle aria-label="Afficher le mot de passe">Voir</button>
                    </div>

                    <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
                    <button class="login-submit" type="submit">Se connecter</button>
                </form>
            </div>

            <footer class="login-footer">
                &copy; {{ "now"|date("Y") }} SPG. Tous droits réservés.
            </footer>
        </main>
    </div>
</div>
{% endblock %}

{% block javascripts %}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var toggle = document.querySelector('[data-password-toggle]');
        var password = document.getElementById('password');
        if (!toggle || !password) {
            return;
        }

        toggle.addEventListener('click', function () {
            var isPassword = password.type === 'password';
            password.type = isPassword ? 'text' : 'password';
            toggle.textContent = isPassword ? 'Masquer' : 'Voir';
            toggle.setAttribute('aria-label', isPassword ? 'Masquer le mot de passe' : 'Afficher le mot de passe');
        });
    });
</script>
{% endblock %}