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

{% block title %}Seleccionar Sucursal - Estudio Souilhé{% endblock %}

{% block header_title %}Selección de Sucursal de Operación{% endblock %}

{% block body %}
<div class="container-fluid px-0 py-3">
    <div class="row justify-content-center align-items-center" style="min-height: 70vh;">
        <div class="col-12 col-sm-10 col-md-8 col-lg-5 col-xl-4">
            <div class="card card-materio border shadow-sm">
                <div class="card-header bg-white border-bottom text-center pt-4 pb-3">
                    <div class="d-inline-flex align-items-center justify-content-center bg-primary text-white rounded-circle p-3 mb-2 shadow-sm" style="width: 54px; height: 54px;">
                        <i class="bx bx-building fs-2"></i>
                    </div>
                    <h5 class="mb-1 fw-bold text-dark">Seleccione la Sucursal</h5>
                    <p class="text-muted small mb-0">Elija la sucursal con la que operará en esta sesión de trabajo.</p>
                </div>
                <div class="card-body p-4">
                    {% if app.session.get('sucursal') is not null %}
                        <div class="alert alert-info py-2 px-3 small d-flex align-items-center mb-3 rounded-3">
                            <i class="bx bx-info-circle fs-5 me-2"></i>
                            <div>
                                Sucursal actual: <strong>{{ app.session.get('sucursal').nombre }}</strong>
                            </div>
                        </div>
                    {% endif %}

                    {{ form_start(form) }}
                        {{ form_errors(form) }}
                        
                        <div class="mb-4">
                            {{ form_label(form.sucursal, 'Sucursales Disponibles', {'label_attr': {'class': 'form-label fw-semibold text-dark'}}) }}
                            {{ form_widget(form.sucursal, {'attr': {'class': 'form-select form-select-lg shadow-none'}}) }}
                            {{ form_errors(form.sucursal) }}
                        </div>

                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary rounded-pill py-2 fw-semibold shadow-sm">
                                <i class="bx bx-check me-1"></i> Guardar
                            </button>
                            <a href="{{ path('app_logout') }}" class="btn btn-outline-secondary rounded-pill py-2 fw-semibold text-muted">
                                <i class="bx bx-power-off me-1"></i> Cerrar Sesión
                            </a>
                        </div>
                    {{ form_end(form) }}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}