{% 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': 'Mon compte', 'href': '#mot-de-passe'},
    {'label': 'Blog', 'href': app.request.getSchemeAndHttpHost() ~ path('app_blog_show_index')}
]) %}

{% set seoTitle = 'Modifier mon mot de passe - RueduProf' %}
{% set seoDescription = 'Mettez à jour votre mot de passe RueduProf depuis une interface modernisée et cohérente avec le thème V2.' %}
{% set seoUrl = 'https://www.rueduprof.com/account/change-password' %}

{% 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 }} - RueduProf" />
    <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 }} - RueduProf" />
    <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="mot-de-passe">
    <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('app_setting_index') }}">Mon compte</a></li>
                <li class="breadcrumb-item active" aria-current="page">Modifier le mot de passe</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-start">
                <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> Sécurité du compte</span>
                        </div>
                        <h1 class="display-4 fw-bold text-white mb-3 listing-hero-title">Modifier votre mot de passe</h1>
                        <p class="hero-feature-copy mb-4">
                            Mettez à jour votre mot de passe pour sécuriser votre compte et conserver un accès fiable à votre espace personnel.
                        </p>

                        <div class="row g-3">
                            <div class="col-sm-6">
                                <div class="teacher-mini-box h-100">
                                    <div class="info-label">Bon réflexe</div>
                                    <p class="mb-0">Choisissez un mot de passe unique et difficile à deviner.</p>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="teacher-mini-box h-100">
                                    <div class="info-label">À prévoir</div>
                                    <p class="mb-0">Conservez-le dans un gestionnaire de mots de passe si besoin.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-7">
                    <div class="search-glass-card p-3 p-md-4 p-xl-4 mb-4">
                        <div class="search-card-header mb-3">
                            <div>
                                <div class="search-card-title">Nouveau mot de passe</div>
                                <p class="search-card-copy">Le formulaire reste celui de ton template actuel, simplement présenté dans la structure V2 du login.</p>
                            </div>
                            <div class="search-card-badge">
                                <i class="bi bi-shield-lock"></i>
                            </div>
                        </div>

                        <div class="quick-search-pills mb-4">
                            <span class="quick-search-pill"><i class="bi bi-lock"></i> Actuel</span>
                            <span class="quick-search-pill"><i class="bi bi-key"></i> Nouveau</span>
                            <span class="quick-search-pill"><i class="bi bi-check2-square"></i> Confirmation</span>
                        </div>

                        <form method="POST" action="{{ path('fos_user_change_password') }}" novalidate class="row g-3">
                            {{ form_errors(form) }}

                            <div class="col-12">
                                <label class="form-label fw-semibold">Mot de passe actuel</label>
                                {{ form_widget(form.current_password, { 'attr': {'class': 'form-control form-control-lg', 'placeholder': 'Mot de passe actuel'} }) }}
                                {{ form_errors(form.current_password) }}
                            </div>

                            <div class="col-12">
                                <label class="form-label fw-semibold">Nouveau mot de passe</label>
                                {{ form_widget(form.plainPassword.first, { 'attr': {'class': 'form-control form-control-lg', 'placeholder': 'Nouveau mot de passe'} }) }}
                                {{ form_errors(form.plainPassword.first) }}
                            </div>

                            <div class="col-12">
                                <label class="form-label fw-semibold">Confirmer le mot de passe</label>
                                {{ form_widget(form.plainPassword.second, { 'attr': {'class': 'form-control form-control-lg', 'placeholder': 'Confirmer le mot de passe'} }) }}
                                {{ form_errors(form.plainPassword.second) }}
                            </div>

                            <div class="col-12">
                                {{ form_widget(form._token) }}
                            </div>

                            <div class="col-12 d-grid gap-3 mt-2">
                                <button class="btn btn-primary btn-lg btn-pill" type="submit">Enregistrer mon nouveau mot de passe</button>
                                <a href="{{ path('app_setting_index') }}" class="btn btn-light btn-lg btn-pill listing-secondary-btn text-decoration-none text-center">Retour à mon compte</a>
                            </div>
                        </form>

                        <div class="auth-form-note mt-4 mb-0">
                            <div class="auth-form-note-icon"><i class="bi bi-info-circle"></i></div>
                            <div>
                                <div class="fw-bold mb-1">Conseil sécurité</div>
                                <p class="mb-0 text-muted">Évitez de réutiliser un mot de passe déjà utilisé sur une autre plateforme.</p>
                            </div>
                        </div>
                    </div>

                    <div class="content-panel">
                        <div class="section-eyebrow">Compte</div>
                        <h2 class="section-title mb-3">Raccourcis utiles</h2>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <a href="{{ path('app_setting_index') }}" class="subject-card d-flex align-items-start justify-content-between gap-3 h-100 text-decoration-none">
                                    <div>
                                        <div class="subject-count">Compte</div>
                                        <div class="subject-label">Revenir à <b>mes paramètres</b></div>
                                    </div>
                                    <span class="subject-arrow">→</span>
                                </a>
                            </div>
                            <div class="col-md-6">
                                <a href="{{ path('fos_user_security_login') }}" class="subject-card d-flex align-items-start justify-content-between gap-3 h-100 text-decoration-none">
                                    <div>
                                        <div class="subject-count">Accès</div>
                                        <div class="subject-label">Retourner à la <b>connexion</b></div>
                                    </div>
                                    <span class="subject-arrow">→</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}

{% block javascripts %}{% endblock %}