{% extends 'base.html.twig' %}
{% block title %}Créez votre mot de passe — Bubul{% endblock %}
{% block show_sidebar %}false{% endblock %}
{% block meta_robots %}noindex, nofollow{% endblock %}
{% block body %}
{% embed '_organisms/step-layout/step-layout.html.twig' %}
{% block heading %}
<div class="w-full max-w-xl text-center mb-3 sm:mb-8">
    <h1 class="text-xl sm:text-3xl font-bold text-gray-700 mb-2">Choisissez un mot de passe</h1>
    <p class="text-sm text-gray-500">Seul vous devez pouvoir accéder à votre bulle.</p>
</div>
{% endblock %}
{% block card %}
    {% if error is defined and error %}
        <div class="error-message mb-4 p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">{{ error }}</div>
    {% endif %}
    <form method="POST" action="{{ path('app_welcome') }}" data-controller="password-strength">
        <input type="hidden" name="step" value="password">
        <input type="hidden" name="_token" value="{{ csrf_token('welcome') }}">
        <div class="mb-2 sm:mb-4">
            {% include '_atoms/form/input.html.twig' with {
                type: 'password',
                label: 'Mot de passe',
                name: 'password',
                id: 'password',
                required: true,
                icon: 'lock',
                attr: {
                    'autofocus': 'autofocus',
                    'data-password-strength-target': 'input',
                    'data-action': 'input->password-strength#onInput'
                }
            } only %}
            <div class="mt-2 h-1.5 w-full bg-gray-200 rounded-full overflow-hidden">
                <div data-password-strength-target="bar" class="h-full rounded-full transition-all duration-300 bg-gray-200" style="width:0%"></div>
            </div>
            <p class="text-xs text-gray-500 mt-1"><span data-password-strength-target="label"></span></p>
        </div>
        <div class="mb-3 sm:mb-6">
            {% include '_atoms/form/input.html.twig' with {
                type: 'password',
                label: 'Confirmation',
                name: 'password_confirm',
                id: 'password_confirm',
                required: true,
                icon: 'lock'
            } only %}
        </div>
        {% include '_atoms/button/button.html.twig' with {
            label: 'Continuer',
            type: 'submit',
            variant: 'primary',
            width: 'full'
        } only %}
    </form>
{% endblock %}
{% endembed %}
{% endblock %}