{# templates/frontend/reset_password/reset.html.twig #}
{% extends 'frontend/base_front.html.twig' %}
{% form_theme resetForm with ['bootstrap_5_layout.html.twig'] %}

{% block title %}Choisis ton nouveau mot de passe – Bluesy{% endblock %}

{% block main_content %}
    <section class="d-flex align-items-center justify-content-center py-5 py-md-6 mt-lg-5 min-vh-100"
             style="background:linear-gradient(135deg,#f0f4ff,#ffffff);">
        <div class="card shadow-lg rounded-4 overflow-hidden mx-3 my-4"
             style="max-width:460px;width:100%;">
            {# -------- Header -------- #}
            <div class="text-center py-4 px-4"
                 style="background:linear-gradient(135deg,#0d6efd 0%,#4c8dff 100%);">
                <div class="d-inline-flex align-items-center justify-content-center bg-white bg-opacity-25 rounded-circle mb-3"
                     style="width:64px;height:64px;">
                    <i class="fas fa-unlock-alt fa-xl text-white"></i>
                </div>
                <h2 class="fw-bold text-white mb-0 fs-sm-4">Nouveau&nbsp;mot&nbsp;de&nbsp;passe</h2>
            </div>

            {# -------- Formulaire -------- #}
            <div class="p-4 p-md-5">
                {{ form_start(resetForm, { attr: { novalidate: 'novalidate' } }) }}

                <div class="alert alert-info small d-flex align-items-start gap-2 mb-4">
                    <i class="fas fa-info-circle mt-1"></i>
                    <span>8&nbsp;caractères minimum – chiffre &amp; lettre recommandés.</span>
                </div>

                {# Champ 1 #}
                {% set first = resetForm.newPassword.first %}
                {% set firstId = first.vars.id %}
                <div class="mb-3">
                    {{ form_label(first, 'Nouveau mot de passe',
                        { label_attr:{class:'form-label fw-semibold'} }) }}
                    <div class="input-group">
                        {{ form_widget(first, {
                            type:'password',
                            attr:{
                                id:firstId,
                                class:'form-control' ~ (first.vars.errors|length ? ' is-invalid' : ''),
                                placeholder:'••••••••'
                            }
                        }) }}
                        <button class="btn btn-outline-secondary" type="button"
                                onclick="window.togglePassword('{{ firstId }}','icon_{{ firstId }}')">
                            <i id="icon_{{ firstId }}" class="fas fa-eye"></i>
                        </button>
                    </div>
                    {% for error in first.vars.errors %}
                        <div class="invalid-feedback d-block">{{ error.message }}</div>
                    {% endfor %}
                </div>

                {# Champ 2 #}
                {% set second = resetForm.newPassword.second %}
                {% set secondId = second.vars.id %}
                <div class="mb-4">
                    {{ form_label(second, 'Confirmation',
                        { label_attr:{class:'form-label fw-semibold'} }) }}
                    <div class="input-group">
                        {{ form_widget(second, {
                            type:'password',
                            attr:{
                                id:secondId,
                                class:'form-control' ~ (second.vars.errors|length ? ' is-invalid' : ''),
                                placeholder:'••••••••'
                            }
                        }) }}
                        <button class="btn btn-outline-secondary" type="button"
                                onclick="window.togglePassword('{{ secondId }}','icon_{{ secondId }}')">
                            <i id="icon_{{ secondId }}" class="fas fa-eye"></i>
                        </button>
                    </div>
                    {% for error in second.vars.errors %}
                        <div class="invalid-feedback d-block">{{ error.message }}</div>
                    {% endfor %}
                </div>

                <button type="submit" class="btn btn-primary btn-md w-100">
                    Mettre à jour le mot de passe
                </button>

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

        <script>
            window.togglePassword = function(fieldId, iconId) {
                const input = document.getElementById(fieldId);
                const icon  = document.getElementById(iconId);
                const show = input.type === 'password';
                input.type = show ? 'text' : 'password';
                icon.classList.replace(show ? 'fa-eye' : 'fa-eye-slash',
                    show ? 'fa-eye-slash' : 'fa-eye');
            };
        </script>
    </section>
{% endblock %}