<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Connexion | SALSABIL Madrassas</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="icon" type="image/png" href="{{ asset('assets/brand/favicon.png') }}">
    <link href="{{ asset('assets/admin/auth.css') }}" rel="stylesheet">
</head>
<body class="auth-body">
    <main class="auth-stage">
        <section class="auth-panel">
            <div class="auth-brand">
                <img class="auth-brand-logo brand-logo-light" src="{{ asset('assets/brand/logo-salmad-light.png') }}" alt="SALSABIL Madrassas">
                <p>Portail de gestion des madrassas</p>
            </div>

            <div class="auth-card">
                <div class="auth-card-topbar"></div>

                <div class="auth-card-body">
                    <div class="auth-heading">
                        <h2>Connexion</h2>
                        <p>Accédez à votre tableau de bord académique et administratif.</p>
                    </div>

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

                    <form method="post" class="auth-form">
                        <div class="auth-field">
                            <label for="email">Adresse e-mail</label>
                            <div class="auth-input-wrap">
                                <span class="material-symbols-outlined">mail</span>
                                <input
                                    type="email"
                                    value="{{ last_username }}"
                                    name="email"
                                    id="email"
                                    autocomplete="email"
                                    placeholder="admin@salsabilmadrassas.com"
                                    required
                                    autofocus
                                >
                            </div>
                        </div>

                        <div class="auth-field">
                            <div class="auth-label-row">
                                <label for="password">Mot de passe</label>
                                <a href="#">Mot de passe oublié ?</a>
                            </div>
                            <div class="auth-input-wrap">
                                <span class="material-symbols-outlined">lock</span>
                                <input
                                    type="password"
                                    name="password"
                                    id="password"
                                    autocomplete="current-password"
                                    placeholder="••••••••"
                                    required
                                >
                            </div>
                        </div>

                        <div class="auth-check">
                            <input id="remember" type="checkbox">
                            <label for="remember">Rester connecté pendant 30 jours</label>
                        </div>

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

                        <button class="auth-submit" type="submit">
                            <span>Se connecter</span>
                            <span class="material-symbols-outlined">arrow_forward</span>
                        </button>
                    </form>

                    <div class="auth-divider">
                        <span>Accès réservé au personnel autorisé</span>
                    </div>

                    <div class="auth-footer-links">
                        <button type="button">
                            <span class="material-symbols-outlined">help_outline</span>
                            <span>Assistance</span>
                        </button>
                        <span class="auth-dot"></span>
                        <button type="button">
                            <span class="material-symbols-outlined">language</span>
                            <span>Français</span>
                        </button>
                    </div>
                </div>
            </div>

            <p class="auth-register-link">
                Nouveau sur la plateforme ?
                <a href="{{ path('public_home') }}">Retour à l’accueil</a>
            </p>

            <div class="auth-seal">
                <div class="auth-seal-mark">
                    <img class="brand-mark" src="{{ asset('assets/brand/favicon.png') }}" alt="">
                </div>
                <p>Savoir islamique et gestion moderne</p>
            </div>
        </section>

        <aside class="auth-security-note">
            <div class="auth-security-icon">
                <span class="material-symbols-outlined">verified_user</span>
            </div>
            <div>
                <strong>Environnement sécurisé</strong>
                <p>Votre session est protégée par chiffrement et mécanismes d’authentification renforcés.</p>
            </div>
        </aside>
    </main>
</body>
</html>
