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

{% block title %}Créer un compte{% endblock %}

{% block body %}
<div class="row justify-content-center" style="margin-top:60px;">
    <div class="col-md-4 col-sm-10">
        <div style="background:var(--warm-white);border:1.5px solid var(--cream-border);border-radius:16px;padding:36px;">

            <div style="text-align:center;margin-bottom:28px;">
                <div style="width:52px;height:52px;background:var(--petrol);border-radius:14px;
                            display:inline-flex;align-items:center;justify-content:center;
                            font-size:24px;margin-bottom:14px;">🍽️</div>
                <h1 style="font-size:22px;margin-bottom:4px;">Créer un compte</h1>
                <p style="font-size:13px;color:var(--text-light);margin:0;">Rejoins le carnet de recettes familial</p>
            </div>

            {{ form_errors(registrationForm) }}

            {{ form_start(registrationForm, {'attr': {'novalidate': 'novalidate'}}) }}

                <div style="margin-bottom:16px;">
                    {{ form_label(registrationForm.displayName, 'Prénom / Pseudo',
                        {'label_attr': {'style': 'font-size:13px;font-weight:500;color:var(--text-mid);display:block;margin-bottom:5px;'}}) }}
                    {{ form_widget(registrationForm.displayName, {'attr': {'class': 'form-control', 'placeholder': 'Ex : Marie'}}) }}
                    {{ form_errors(registrationForm.displayName) }}
                </div>

                <div style="margin-bottom:16px;">
                    {{ form_label(registrationForm.email, 'Email',
                        {'label_attr': {'style': 'font-size:13px;font-weight:500;color:var(--text-mid);display:block;margin-bottom:5px;'}}) }}
                    {{ form_widget(registrationForm.email, {'attr': {'class': 'form-control', 'placeholder': 'exemple@email.com'}}) }}
                    {{ form_errors(registrationForm.email) }}
                </div>

                <div style="margin-bottom:24px;">
                    {{ form_label(registrationForm.plainPassword, 'Mot de passe',
                        {'label_attr': {'style': 'font-size:13px;font-weight:500;color:var(--text-mid);display:block;margin-bottom:5px;'}}) }}
                    {{ form_widget(registrationForm.plainPassword, {'attr': {'class': 'form-control'}}) }}
                    {{ form_errors(registrationForm.plainPassword) }}
                </div>

                <button type="submit" class="btn-petrol" style="width:100%;justify-content:center;padding:10px;">
                    <i class="bi bi-person-plus"></i> Créer mon compte
                </button>

            {{ form_end(registrationForm) }}

            <div style="border-top:1px solid var(--cream-border);margin-top:24px;padding-top:20px;text-align:center;">
                <p style="font-size:13px;color:var(--text-light);margin:0;">
                    Déjà un compte ?
                    <a href="{{ path('app_login') }}" style="color:var(--petrol);font-weight:500;">Se connecter</a>
                </p>
            </div>

        </div>
    </div>
</div>
{% endblock %}