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

{% block title %}Bubul - Activer mon compte{% endblock %}

{% block show_sidebar %}false{% endblock %}

{% block meta_robots %}noindex, nofollow{% endblock %}

{% block body_class %}{% endblock %}

{% block meta_description %}Activez votre compte Bubul et choisissez votre mot de passe.{% endblock %}

{% block body %}
    {% embed '_organisms/auth-layout/auth-layout.html.twig' with {
        logoVariant: 'soft',
        logoSize: '2xl'
    } %}
        {% block content %}
            <div class="w-full max-w-md mx-auto px-6 py-8 lg:px-8 lg:py-12">
                {# ===== Lien retour ===== #}
                <div class="mb-8">
                    {% include '_atoms/link/link.html.twig' with {
                        label: 'Retour à la connexion',
                        href: path('app_login'),
                        variant: 'muted',
                        icon: 'arrow-left',
                        iconPosition: 'left',
                        iconAnimate: true,
                        size: 'sm'
                    } only %}
                </div>

                {# ===== Titre ===== #}
                <div class="mb-3">
                    <h1 class="text-2xl lg:text-3xl font-secondary font-medium text-black mb-3">
                        Bienvenue, {{ user.firstName }} !
                    </h1>
                    <p class="text-gray-600">
                        Choisissez un mot de passe pour activer votre compte <strong>{{ user.email }}</strong>.
                    </p>
                </div>

                {# ===== Formulaire ===== #}
                <form method="post" action="{{ path('app_complete_registration', {'token': token}) }}" class="space-y-5 mt-6" data-turbo="false">
                    <input type="hidden" name="_token" value="{{ csrf_token('complete_registration') }}">
                    {% include '_atoms/form/input.html.twig' with {
                        type: 'password',
                        name: 'password',
                        id: 'password',
                        icon: 'lock',
                        iconPosition: 'left',
                        placeholder: 'Mot de passe',
                        hint: 'Au moins ' ~ constant('App\\Config\\AppLimits::PASSWORD_MIN_LENGTH') ~ ' caractères',
                        required: true,
                        attr: { autofocus: 'autofocus' }
                    } only %}

                    {% include '_atoms/form/input.html.twig' with {
                        type: 'password',
                        name: 'password_confirm',
                        id: 'password_confirm',
                        icon: 'key',
                        iconPosition: 'left',
                        placeholder: 'Confirmer le mot de passe',
                        required: true
                    } only %}

                    <div class="flex items-start gap-3 pt-1">
                        <input type="checkbox"
                               name="agree_terms"
                               id="agree_terms"
                               required
                               class="mt-0.5 shrink-0 w-4 h-4 accent-primary cursor-pointer">
                        <label for="agree_terms" class="text-sm text-[#6B7B8F] cursor-pointer leading-snug">
                            J'accepte les <a href="/cgu" target="_blank" class="text-primary hover:underline">conditions générales d'utilisation</a>
                        </label>
                    </div>

                    <div class="pt-2">
                        {% include '_atoms/button/button.html.twig' with {
                            label: 'Activer mon compte',
                            type: 'submit',
                            variant: 'primary',
                            size: 'lg',
                            width: 'full',
                            radius: 'lg'
                        } only %}
                    </div>
                </form>
            </div>
        {% endblock %}
    {% endembed %}
{% endblock %}