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

{% block title %}Mot de passe oublié | Izibrick{% endblock %}

{% block stylesheets %}
<style>
    .reset-container {
        min-height: 100vh;
        display: flex;
        align-items: center;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        position: relative;
        overflow: hidden;
    }

    .reset-decorative-shape {
        position: absolute;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
    }

    .reset-shape-1 {
        width: 300px;
        height: 300px;
        top: -100px;
        right: -100px;
        animation: float 8s ease-in-out infinite;
    }

    .reset-shape-2 {
        width: 200px;
        height: 200px;
        bottom: -50px;
        left: -50px;
        animation: float 10s ease-in-out infinite reverse;
    }

    @keyframes float {
        0%, 100% { transform: translateY(0px) rotate(0deg); }
        50% { transform: translateY(-20px) rotate(10deg); }
    }

    .reset-card {
        backdrop-filter: blur(10px);
        background: rgba(255, 255, 255, 0.95);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .reset-input-icon {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: #667eea;
    }

    .reset-input-with-icon {
        padding-left: 45px;
    }

    .reset-card:hover {
        transform: translateY(-5px);
        transition: transform 0.3s ease;
    }
</style>
{% endblock %}

{% block body %}
<div class="reset-container">
    {# Decorative shapes #}
    <div class="reset-decorative-shape reset-shape-1"></div>
    <div class="reset-decorative-shape reset-shape-2"></div>

    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-5 col-md-7">
                <div class="card reset-card border-0 shadow-lg rounded-4" style="transition: transform 0.3s;">
                    {# Header with Logo #}
                    <div class="card-header border-0 bg-transparent text-center pt-5 pb-0">
                        <div class="mb-4">
                            <img src="{{ asset('assets/img/logo/logo-izibrick.png') }}" alt="izibrick" style="width: 70px; height: 70px;">
                        </div>
                        <h2 class="fw-bold mb-2" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
                            Mot de passe oublié ?
                        </h2>
                        <p class="text-muted mb-0">Entrez votre email pour réinitialiser votre mot de passe</p>
                    </div>

                    {# Card Body #}
                    <div class="card-body p-5">
                        {{ form_start(requestForm) }}

                            <div class="mb-4">
                                <label for="{{ requestForm.email.vars.id }}" class="form-label fw-semibold">
                                    <i class="fas fa-envelope me-2" style="color: #667eea;"></i>Email
                                </label>
                                <div class="position-relative">
                                    <i class="fas fa-envelope reset-input-icon"></i>
                                    {{ form_widget(requestForm.email, {
                                        'attr': {
                                            'class': 'form-control form-control-lg reset-input-with-icon rounded-3',
                                            'placeholder': 'votre@email.com'
                                        }
                                    }) }}
                                </div>
                                {{ form_errors(requestForm.email) }}
                            </div>

                            {# Submit Button #}
                            <button type="submit" class="btn btn-lg w-100 text-white fw-semibold rounded-pill mb-3 py-3" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none;">
                                <i class="fas fa-paper-plane me-2"></i>Envoyer le lien de réinitialisation
                            </button>

                            {# Divider #}
                            <div class="text-center my-4">
                                <span class="text-muted small">ou</span>
                            </div>

                            {# Back to Login Link #}
                            <div class="text-center">
                                <a href="{{ path('app_login') }}" class="btn btn-outline-primary btn-lg w-100 rounded-pill fw-semibold">
                                    <i class="fas fa-arrow-left me-2"></i>Retour à la connexion
                                </a>
                            </div>

                        {{ form_end(requestForm) }}
                    </div>

                    {# Footer #}
                    <div class="card-footer border-0 bg-transparent text-center pb-4">
                        <small class="text-muted">
                            <i class="fas fa-shield-alt me-1"></i>
                            Processus sécurisé SSL
                        </small>
                    </div>
                </div>

                {# Back to Home Link #}
                <div class="text-center mt-4">
                    <a href="{{ path('index') }}" class="text-white text-decoration-none">
                        <i class="fas fa-home me-2"></i>Retour à l'accueil
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Add hover effect to reset card
        const card = document.querySelector('.reset-card');
        if (card) {
            card.addEventListener('mouseenter', function() {
                this.style.transform = 'translateY(-10px)';
            });
            card.addEventListener('mouseleave', function() {
                this.style.transform = 'translateY(0)';
            });
        }

        // Focus effect on input
        const input = document.querySelector('.reset-input-with-icon');
        if (input) {
            input.addEventListener('focus', function() {
                const icon = this.parentElement.querySelector('.reset-input-icon');
                if (icon) {
                    icon.style.color = '#667eea';
                }
            });
            input.addEventListener('blur', function() {
                const icon = this.parentElement.querySelector('.reset-input-icon');
                if (icon) {
                    icon.style.color = '#999';
                }
            });
        }
    });
</script>
{% endblock %}