<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mot de passe oublié - Plateforme d'Inscription</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link href="../auth-style.css" rel="stylesheet">
</head>
<body>
<div class="container-custom">
    <div class="card main-card">

        <!-- Logo -->
        <div class="logo">
            <div class="logo-icon">
                <i class="fas fa-key"></i>
            </div>
            <h1>Mot de passe oublié</h1>
            <p>Entrez votre CIN pour recevoir un nouveau mot de passe</p>
        </div>

        <!-- Zone message (succès ou erreur) -->
        <div id="messageContainer"></div>

        <!-- Formulaire CIN -->
        <form id="forgotForm">
            <div class="mb-3">
                <label class="form-label">CIN</label>
                <div class="input-with-icon">
                    <i class="fas fa-id-card"></i>
                    <input type="text"
                           class="form-control"
                           id="cin"
                           name="cin"
                           placeholder="Entrez votre CIN (ex: BK123456)"
                           required>
                </div>
                <div class="error-message" id="cin-error">Veuillez entrer votre CIN</div>
            </div>

            <button type="submit"
                    class="btn btn-custom-primary d-flex align-items-center justify-content-center gap-2 mb-3"
                    id="submitBtn">
                <i class="fas fa-paper-plane"></i> Envoyer le nouveau mot de passe
            </button>
        </form>

        <!-- Lien retour -->
        <div class="forgot-password">
            <a href="/est-concours/app/cnx/student/login/">
                <i class="fas fa-arrow-left"></i> Retour à la connexion
            </a>
        </div>

    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
<script src="main.js"></script>

</body>
</html>
