<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ app_name }} - Changement de mot de passe</title>
    <link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
    <link rel="stylesheet" href="/static/css/tailwind.css">
    <style>
        body { background: #0a0e17; color: #e2e8f0; font-family: 'Segoe UI', system-ui, sans-serif; }
        .card { background: #111827; border: 1px solid #1e3a5f; border-radius: 8px; }
        .btn-primary { background: #00d4ff; color: #0a0e17; font-weight: 600; border-radius: 6px; }
        .btn-primary:hover { background: #00b8e6; }
        input { background: #0a0e17; border: 1px solid #1e3a5f; color: #e2e8f0; border-radius: 6px; padding: 6px 12px; font-size: 0.85rem; }
        input:focus { outline: none; border-color: #00d4ff; box-shadow: 0 0 0 2px #00d4ff33; }
    </style>
</head>
<body class="min-h-screen">
<div class="min-h-screen flex items-center justify-center">
    <div class="card p-8 w-96">
        <div class="text-center mb-6">
            <img src="/static/logo_sanef.jpg" alt="SANEF" class="h-12 mx-auto mb-3 rounded" style="opacity:0.9">
            <h1 class="text-xl font-bold text-cyber-accent">Changement de mot de passe requis</h1>
            <p class="text-xs text-gray-500 mt-1">Bienvenue <b>{{ user.sub }}</b></p>
            <p class="text-xs text-gray-500 mt-1">Vous devez définir un nouveau mot de passe avant de continuer.</p>
        </div>

        {% if error %}
        <div class="bg-cyber-red/20 text-cyber-red text-sm p-3 rounded mb-4">{{ error }}</div>
        {% endif %}

        <form method="POST" action="/me/change-password" class="space-y-4">
            <div>
                <label class="text-xs text-gray-400 block mb-1">Mot de passe actuel</label>
                <input type="password" name="current_password" required autofocus class="w-full">
            </div>
            <div>
                <label class="text-xs text-gray-400 block mb-1">Nouveau mot de passe <span class="text-gray-600">(min 8 caractères)</span></label>
                <input type="password" name="new_password" required minlength="8" class="w-full">
            </div>
            <div>
                <label class="text-xs text-gray-400 block mb-1">Confirmer le nouveau mot de passe</label>
                <input type="password" name="confirm_password" required minlength="8" class="w-full">
            </div>
            <button type="submit" class="btn-primary w-full py-2 rounded-md">Enregistrer</button>
        </form>

        <div class="mt-4 text-center">
            <a href="/logout" class="text-xs text-gray-500 hover:text-cyber-accent">Se déconnecter</a>
        </div>
    </div>
</div>
</body>
</html>
