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

{% block title %}Nouveau mot de passe - NUM-ECARD{% endblock %}

{% block body %}
<style>
    .auth-section {
        min-height: calc(100vh - 44px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 60px 20px;
        background: linear-gradient(180deg, #f5f5f7 0%, #ffffff 50%, #f5f5f7 100%);
    }

    .auth-container {
        width: 100%;
        max-width: 480px;
    }

    .auth-header {
        text-align: center;
        margin-bottom: 40px;
    }

    .auth-icon {
        width: 80px;
        height: 80px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 24px;
        font-size: 36px;
        box-shadow: 0 10px 40px rgba(102, 126, 234, 0.3);
    }

    .auth-title {
        font-size: 32px;
        font-weight: 600;
        color: #1d1d1f;
        letter-spacing: -0.02em;
        margin-bottom: 8px;
    }

    .auth-subtitle {
        font-size: 17px;
        color: #86868b;
        font-weight: 400;
    }

    .auth-card {
        background: #ffffff;
        border-radius: 20px;
        padding: 40px;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
        border: 1px solid rgba(0, 0, 0, 0.04);
    }

    .auth-alert {
        padding: 16px 20px;
        border-radius: 12px;
        margin-bottom: 24px;
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .auth-alert-error {
        background: linear-gradient(135deg, #fff5f5 0%, #fee2e2 100%);
        color: #991b1b;
        border: 1px solid #fecaca;
    }

    .auth-alert-icon {
        font-size: 20px;
    }

    .auth-form-group {
        margin-bottom: 20px;
    }

    .auth-label {
        display: block;
        font-size: 14px;
        font-weight: 600;
        color: #1d1d1f;
        margin-bottom: 8px;
        letter-spacing: -0.01em;
    }

    .auth-input {
        width: 100%;
        padding: 16px 18px;
        border: 1px solid #d2d2d7;
        border-radius: 12px;
        font-size: 17px;
        font-family: inherit;
        transition: all 0.2s ease;
        background: #ffffff;
        color: #1d1d1f;
        box-sizing: border-box;
    }

    .auth-input:focus {
        outline: none;
        border-color: #0071e3;
        box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.1);
    }

    .auth-input::placeholder {
        color: #86868b;
    }

    .auth-btn {
        width: 100%;
        padding: 18px 24px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: #ffffff;
        border: none;
        border-radius: 12px;
        font-size: 17px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        font-family: inherit;
        letter-spacing: -0.01em;
        margin-top: 8px;
    }

    .auth-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 40px rgba(102, 126, 234, 0.4);
    }

    .auth-btn:active {
        transform: translateY(0);
    }

    .password-strength {
        margin-top: 8px;
        font-size: 12px;
        color: #86868b;
    }

    .password-rules {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 8px;
    }

    .password-rule {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 12px;
        color: #86868b;
        transition: color 0.2s;
    }

    .password-rule.valid {
        color: #059669;
    }

    .password-rule-icon {
        font-size: 14px;
    }

    @media (max-width: 600px) {
        .auth-card {
            padding: 28px 20px;
        }

        .auth-title {
            font-size: 26px;
        }
    }
</style>

<section class="auth-section">
    <div class="auth-container">
        <div class="auth-header">
            <div class="auth-icon">🔑</div>
            <h1 class="auth-title">Nouveau mot de passe</h1>
            <p class="auth-subtitle">Choisissez un nouveau mot de passe pour votre compte</p>
        </div>

        <div class="auth-card">
            {% for message in app.flashes('error') %}
                <div class="auth-alert auth-alert-error">
                    <span class="auth-alert-icon">❌</span>
                    <span>{{ message }}</span>
                </div>
            {% endfor %}

            <form method="post">
                <div class="auth-form-group">
                    <label class="auth-label" for="password">Nouveau mot de passe</label>
                    <input type="password" 
                           id="password" 
                           name="password" 
                           class="auth-input" 
                           placeholder="Minimum 8 caractères"
                           required 
                           minlength="8"
                           autofocus>
                    <div class="password-rules">
                        <span class="password-rule" id="rule-length">
                            <span class="password-rule-icon">○</span> 8 caractères min.
                        </span>
                    </div>
                </div>

                <div class="auth-form-group">
                    <label class="auth-label" for="password_confirm">Confirmer le mot de passe</label>
                    <input type="password" 
                           id="password_confirm" 
                           name="password_confirm" 
                           class="auth-input" 
                           placeholder="Retapez votre mot de passe"
                           required 
                           minlength="8">
                    <div class="password-rules">
                        <span class="password-rule" id="rule-match">
                            <span class="password-rule-icon">○</span> Mots de passe identiques
                        </span>
                    </div>
                </div>

                <button type="submit" class="auth-btn">
                    Réinitialiser mon mot de passe →
                </button>
            </form>
        </div>
    </div>
</section>

<script>
(function() {
    const password = document.getElementById('password');
    const confirm = document.getElementById('password_confirm');
    const ruleLength = document.getElementById('rule-length');
    const ruleMatch = document.getElementById('rule-match');

    function updateRules() {
        // Longueur
        if (password.value.length >= 8) {
            ruleLength.classList.add('valid');
            ruleLength.querySelector('.password-rule-icon').textContent = '✓';
        } else {
            ruleLength.classList.remove('valid');
            ruleLength.querySelector('.password-rule-icon').textContent = '○';
        }

        // Correspondance
        if (confirm.value.length > 0 && password.value === confirm.value) {
            ruleMatch.classList.add('valid');
            ruleMatch.querySelector('.password-rule-icon').textContent = '✓';
        } else {
            ruleMatch.classList.remove('valid');
            ruleMatch.querySelector('.password-rule-icon').textContent = '○';
        }
    }

    password.addEventListener('input', updateRules);
    confirm.addEventListener('input', updateRules);
})();
</script>
{% endblock %}