{% extends 'base.html.twig' %}
{% block title %}{{ title }}{% endblock %}

{% block body %}

<div class="card border-0 shadow-sm mx-auto" style="max-width: 900px;">
    <div class="card-header border-0 py-5">
        <h3 class="card-title fw-bold fs-2">{{ title }}</h3>
    </div>

    <div class="card-body py-5 px-8">

        {{ form_start(form, { attr: { class: 'form' } }) }}

        <!-- Nombre + Apellidos -->
        <div class="row mb-7">
            <div class="col-md-6">
                <label class="form-label fw-semibold mb-2">Nombre</label>
                <div class="position-relative">
                    <i class="fas fa-user text-gray-500 position-absolute top-50 translate-middle-y ms-4"></i>
                    {{ form_widget(form.firstName, {
                        attr: { class: 'form-control form-control-solid ps-10' }
                    }) }}
                </div>
                {{ form_errors(form.firstName) }}
            </div>

            <div class="col-md-6">
                <label class="form-label fw-semibold mb-2">Apellidos</label>
                <div class="position-relative">
                    <i class="fas fa-user text-gray-500 position-absolute top-50 translate-middle-y ms-4"></i>
                    {{ form_widget(form.lastName, {
                        attr: { class: 'form-control form-control-solid ps-10' }
                    }) }}
                </div>
                {{ form_errors(form.lastName) }}
            </div>
        </div>

        <!-- Email -->
        <div class="mb-7">
            <label class="form-label fw-semibold mb-2">Correo electrónico</label>
            <div class="position-relative">
                <i class="fas fa-envelope text-gray-500 position-absolute top-50 translate-middle-y ms-4"></i>
                {{ form_widget(form.email, {
                    attr: { class: 'form-control form-control-solid ps-10' }
                }) }}
            </div>
            {{ form_errors(form.email) }}
        </div>

        <!-- Roles -->
        <div class="mb-7">
            <label class="form-label fw-semibold mb-3">Roles</label>

            <div class="row">
                {% for child in form.roles %}
                    <div class="col-md-6 mb-2 d-flex align-items-center">
                        {{ form_widget(child) }}
                        <label class="ms-2">{{ child.vars.label }}</label>
                    </div>
                {% endfor %}
            </div>

            {{ form_errors(form.roles) }}
        </div>

        <!-- Estado -->
        <div class="mb-7">
            <label class="form-label fw-semibold mb-2">Estado</label>
            <div class="position-relative">
                <i class="fas fa-check text-gray-500 position-absolute top-50 translate-middle-y ms-4"></i>
                {{ form_widget(form.active, {
                    attr: { class: 'form-select form-select-solid ps-10' }
                }) }}
            </div>
            {{ form_errors(form.active) }}
        </div>

        <!-- Contraseña -->
        <div class="mb-10">
            <label class="form-label fw-semibold mb-2">Contraseña</label>
            <div class="position-relative">
                <i class="fas fa-lock text-gray-500 position-absolute top-50 translate-middle-y ms-4"></i>
                {{ form_widget(form.plainPassword, {
                    attr: { class: 'form-control form-control-solid ps-10' }
                }) }}
            </div>
            <div class="form-text">
                Déjalo vacío para no modificarla.
            </div>
            {{ form_errors(form.plainPassword) }}
        </div>

        <!-- Divider -->
        <div class="separator my-8"></div>

        <div class="d-flex justify-content-end">
            <button type="submit" class="btn btn-orange btn-lg fw-bold px-8">
                Guardar
            </button>
        </div>

        {{ form_end(form) }}

    </div>
</div>

{% endblock %}