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

{% block title %}Mot de passe oublié - 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;
        line-height: 1.5;
    }

    .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-success {
        background: linear-gradient(135deg, #f0fdf4 0%, #d1fae5 100%);
        color: #065f46;
        border: 1px solid #a7f3d0;
    }

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

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

    .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;
    }

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

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

    .auth-back {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-top: 24px;
        color: #0071e3;
        text-decoration: none;
        font-size: 15px;
        font-weight: 500;
        transition: opacity 0.2s;
    }

    .auth-back:hover {
        opacity: 0.8;
    }

    .auth-info {
        background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
        border: 1px solid #bfdbfe;
        border-radius: 12px;
        padding: 16px 20px;
        margin-bottom: 24px;
        font-size: 14px;
        color: #1e40af;
        line-height: 1.5;
        display: flex;
        align-items: flex-start;
        gap: 12px;
    }

    .auth-info-icon {
        font-size: 20px;
        flex-shrink: 0;
    }

    @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">Mot de passe oublié</h1>
            <p class="auth-subtitle">Saisissez votre adresse email et nous vous enverrons un lien pour réinitialiser votre mot de passe.</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 %}

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

            <div class="auth-info">
                <span class="auth-info-icon">💡</span>
                <span>Un email contenant un lien de réinitialisation vous sera envoyé. Ce lien sera valable pendant <strong>1 heure</strong>.</span>
            </div>

            <form method="post">
                <div class="auth-form-group">
                    <label class="auth-label" for="email">Adresse email</label>
                    <input type="email" 
                           id="email" 
                           name="email" 
                           class="auth-input" 
                           placeholder="votre@email.com"
                           required 
                           autofocus>
                </div>

                <button type="submit" class="auth-btn">
                    Envoyer le lien de réinitialisation →
                </button>
            </form>

            <a href="{{ path('app_login') }}" class="auth-back">
                ← Retour à la connexion
            </a>
        </div>
    </div>
</section>
{% endblock %}