{% extends 'base.html.twig' %}
{% block title %}Créer un compte — Bubul{% endblock %}
{% block show_sidebar %}false{% endblock %}
{% block meta_robots %}noindex, nofollow{% endblock %}

{% block body %}
{% embed '_organisms/step-layout/step-layout.html.twig' with {
    backUrl: path('app_login'), backText: 'Déjà un compte ?', backAction: 'Se connecter'
} %}
{% block heading %}
<div class="w-full max-w-md text-center mb-4 sm:mb-8">
    <h1 class="text-xl sm:text-3xl font-bold text-gray-700 mb-2 leading-tight">Bienvenue sur Bubul !</h1>
    <p class="text-sm text-gray-500">Commençons — votre adresse email.</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_register') }}">
        <input type="hidden" name="_token" value="{{ csrf_token('register') }}">
        <input type="text" name="website" class="hidden" tabindex="-1" autocomplete="off" aria-hidden="true">

        <div class="mb-4">
            {% include '_atoms/form/input.html.twig' with {
                type: 'email',
                name: 'email',
                id: 'email',
                required: true,
                placeholder: 'vous@exemple.fr',
                value: email ?? '',
                icon: 'mail',
                attr: {'autofocus': 'autofocus'}
            } only %}
        </div>

        {% include '_atoms/button/button.html.twig' with {
            label: 'Continuer',
            type: 'submit',
            variant: 'primary',
            width: 'full'
        } only %}
    </form>
{% endblock %}
{% endembed %}
{% endblock %}