{% extends 'App::V2/base.html.twig' %}

{% set site_name = site_name|default('RueduProf') %}

{% set nav_items = nav_items|default([
    {
        'label': 'Cours particuliers',
        'href': app.request.getSchemeAndHttpHost() ~ path('app_home_page')
    },
    {
        'label': 'Connexion',
        'href': app.request.getSchemeAndHttpHost() ~ path('fos_user_security_login')
    },
    {
        'label': 'Inscription',
        'href': app.request.getSchemeAndHttpHost() ~ path('fos_user_registration_register')
    },
    {
        'label': 'Blog',
        'href': app.request.getSchemeAndHttpHost() ~ path('app_blog_show_index')
    }
]) %}

{% set seoTitle = 'Réinitialiser votre mot de passe - RueduProf' %}
{% set seoDescription = 'Demandez un lien de réinitialisation de mot de passe pour retrouver l’accès à votre compte RueduProf.' %}
{% set seoUrl = 'https://www.rueduprof.com/resetting/request' %}

{% block title %}
    {{ seoTitle }}
{% endblock %}

{% block meta_title %}
    {{ seoTitle }}
{% endblock %}

{% block meta_description %}
    {{ seoDescription }}
{% endblock %}

{% block og_url %}
    {{ seoUrl }}
{% endblock %}

{% block canonical %}
    {{ seoUrl }}
{% endblock %}

{% block open_graph %}
    <meta property="og:title" content="{{ seoTitle }}" />
    <meta property="og:description" content="{{ seoDescription }}" />
    <meta property="og:url" content="{{ seoUrl }}" />
    <meta property="og:image" content="https://www.rueduprof.com/images/rueduprof-2016-2.svg" />
{% endblock %}

{% block twitter_card %}
    <meta name="twitter:title" content="{{ seoTitle }}" />
    <meta name="twitter:description" content="{{ seoDescription }}" />
    <meta name="twitter:image" content="https://www.rueduprof.com/images/rueduprof-2016-2.svg" />
{% endblock %}

{% block body %}
<section class="listing-hero-section pt-4 pt-lg-5 pb-4 pb-lg-5" id="reset-request">
    <div class="container-xxl position-relative">
        <nav aria-label="breadcrumb" class="mb-3">
            <ol class="breadcrumb small mb-0">
                <li class="breadcrumb-item"><a href="{{ app.request.getSchemeAndHttpHost() ~ path('homepage') }}">Accueil</a></li>
                <li class="breadcrumb-item"><a href="{{ path('fos_user_security_login') }}">Connexion</a></li>
                <li class="breadcrumb-item active" aria-current="page">Mot de passe oublié</li>
            </ol>
        </nav>

        <div class="listing-hero-shell p-3 p-md-4 p-xl-5">
            <div class="row g-4 g-xl-5 align-items-center">
                <div class="col-xl-5">
                    <div class="listing-hero-content">
                        <div class="d-flex flex-wrap gap-2 mb-3">
                            <span class="listing-hero-kicker"><i class="bi bi-key-fill"></i> Récupération d'accès</span>
                        </div>
                        <h1 class="display-4 fw-bold text-white mb-3 listing-hero-title">Réinitialisez votre mot de passe</h1>
                        <p class="hero-feature-copy mb-4">
                            Saisissez votre email pour recevoir un lien de réinitialisation et récupérer l’accès à votre espace RueduProf.
                        </p>
                        <div class="row g-3">
                            <div class="col-sm-6">
                                <div class="teacher-mini-box h-100">
                                    <div class="info-label">Simple</div>
                                    <p class="mb-0">Un seul champ pour démarrer la réinitialisation.</p>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="teacher-mini-box h-100">
                                    <div class="info-label">Sécurisé</div>
                                    <p class="mb-0">Le lien reçu par email permet de choisir un nouveau mot de passe.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-7">
                    <div class="search-glass-card p-3 p-md-4 p-xl-4">
                        <div class="search-card-header mb-3">
                            <div>
                                <div class="search-card-title">Mot de passe oublié</div>
                            </div>
                            <div class="search-card-badge">
                                <i class="bi bi-envelope-open"></i>
                            </div>
                        </div>

                        <div class="auth-tabs mb-4">
                            <a href="{{ path('fos_user_security_login') }}" class="auth-tab-link">Connexion</a>
                            <a href="#" class="auth-tab-link is-active">Réinitialisation</a>
                        </div>

                        <form action="{{ path('fos_user_resetting_send_email') }}" method="POST" class="row g-3 fos_user_resetting_request" novalidate>
                            <div class="col-12">
                                {% if invalid_username is defined %}
                                    <div class="alert alert-danger rounded-4" role="alert">
                                        <i class="bi bi-exclamation-octagon-fill me-2"></i>{{ 'resetting.request.invalid_username'|trans({'%username%': invalid_username}) }}
                                    </div>
                                {% endif %}
                            </div>

                            <div class="col-12">
                                <label class="form-label fw-semibold" for="username">Adresse email</label>
                                <div class="form-icon-control">
                                    <i class="bi bi-envelope"></i>
                                    <input type="text" id="username" name="username" placeholder="vous@exemple.fr" class="form-control form-control-lg" required="required" autocomplete="username" />
                                </div>
                            </div>

                            <div class="col-12 d-grid gap-3 mt-2">
                                <button type="submit" class="btn btn-primary btn-lg btn-pill">Recevoir un lien de réinitialisation</button>
                                <a href="{{ path('fos_user_security_login') }}" class="btn btn-light btn-lg btn-pill listing-secondary-btn text-decoration-none text-center">Retour à la connexion</a>
                            </div>
                        </form>

                        <div class="auth-form-note mt-4 mb-0">
                            <div class="auth-form-note-icon"><i class="bi bi-person-lock"></i></div>
                            <div>
                                <div class="fw-bold mb-1">Vous avez déjà retrouvé vos accès ?</div>
                                <p class="mb-0 text-muted">Connectez-vous directement à votre compte.</p>
                                <a href="{{ path('fos_user_security_login') }}" class="auth-switch-link mt-2 d-inline-flex">Se connecter</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}