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

{% block title %}Registro de usuario{% endblock %}
{% block body_class %}app-blank{% endblock %}

{% block layout %}
<div class="d-flex flex-column flex-center flex-column-fluid p-10 bg-light">

    <!-- Logo + Title -->
    <div class="text-center mb-10">
        <h1 class="fw-bold text-dark mb-2">Crear una cuenta</h1>
        <div class="text-gray-600 fw-semibold fs-6">
            Regístrate para acceder a Bizkai Sida
        </div>
    </div>

    <!-- Registration Card -->
    <div class="card w-md-450px shadow-sm border-0">

        <div class="card-body p-10">

            <!-- Flash messages -->
            {% for label, messages in app.flashes %}
                {% for message in messages %}
                    <div class="alert alert-{{ label == 'warning' ? 'info' : label }} mb-6">
                        {{ message }}
                    </div>
                {% endfor %}
            {% endfor %}

            {{ form_start(registrationForm, {
                attr: { class: 'form w-100' }
            }) }}

            <!-- First Name -->
            <div class="mb-6">
                <label class="form-label fw-semibold">Nombre</label>
                <div class="input-group input-group-solid align-items-center">
                    <span class="input-group-text bg-transparent border-0 pe-0">
                        <i class="fas fa-user fs-4 text-gray-500"></i>
                    </span>
                    {{ form_widget(registrationForm.firstName, {
                        attr: { class: 'form-control form-control-solid ps-2' }
                    }) }}
                </div>
                {{ form_errors(registrationForm.firstName) }}
            </div>

            <!-- Last Name -->
            <div class="mb-6">
                <label class="form-label fw-semibold">Apellidos</label>
                <div class="input-group input-group-solid align-items-center">
                    <span class="input-group-text bg-transparent border-0 pe-0">
                        <i class="fas fa-user fs-4 text-gray-500"></i>
                    </span>
                    {{ form_widget(registrationForm.lastName, {
                        attr: { class: 'form-control form-control-solid ps-2' }
                    }) }}
                </div>
                {{ form_errors(registrationForm.lastName) }}
            </div>

            <!-- Email -->
            <div class="mb-6">
                <label class="form-label fw-semibold">Correo electrónico</label>
                <div class="input-group input-group-solid align-items-center">
                    <span class="input-group-text bg-transparent border-0 pe-0">
                        <i class="fas fa-envelope fs-4 text-gray-500"></i>
                    </span>
                    {{ form_widget(registrationForm.email, {
                        attr: { class: 'form-control form-control-solid ps-2' }
                    }) }}
                </div>
                {{ form_errors(registrationForm.email) }}
            </div>

            <!-- Password -->
            <div class="mb-6">
                <label class="form-label fw-semibold">Contraseña</label>
                <div class="input-group input-group-solid align-items-center">
                    <span class="input-group-text bg-transparent border-0 pe-0">
                        <i class="fas fa-lock fs-4 text-gray-500"></i>
                    </span>
                    {{ form_widget(registrationForm.plainPassword.first, {
                        attr: { class: 'form-control form-control-solid ps-2' }
                    }) }}
                </div>
                {{ form_errors(registrationForm.plainPassword.first) }}
            </div>

            <!-- Repeat Password -->
            <div class="mb-8">
                <label class="form-label fw-semibold">Repetir contraseña</label>
                <div class="input-group input-group-solid align-items-center">
                    <span class="input-group-text bg-transparent border-0 pe-0">
                        <i class="fas fa-lock fs-4 text-gray-500"></i>
                    </span>
                    {{ form_widget(registrationForm.plainPassword.second, {
                        attr: { class: 'form-control form-control-solid ps-2' }
                    }) }}
                </div>
                {{ form_errors(registrationForm.plainPassword.second) }}
            </div>

            <!-- Submit -->
            <div class="d-grid">
                <button type="submit" class="btn btn-orange btn-lg fw-bold">
                    Crear cuenta
                </button>
            </div>

            {{ form_end(registrationForm) }}

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