{% macro submenu_links(items, flyout) %}
    {% for item in items %}
        {% if item.allowed %}
            <a
                href="{{ path(item.route) }}"
                class="{{ flyout ? 'sidebar-flyout-link' : 'sidebar-submenu-link' }} {{ item.active ? 'active' : '' }}"
                {% if flyout %}role="menuitem"{% endif %}
                {% if item.active %}aria-current="page"{% endif %}
                @click="closeMobileSidebar(); {{ flyout ? 'flyout = false' : '' }}"
            >{{ item.label|trans }}</a>
        {% endif %}
    {% endfor %}
{% endmacro %}

{% import _self as sidebarUi %}

{% set reportItems = [
    {route: 'rep_antiguedad', label: 'menu.reportes.antiguedad_saldos', allowed: has_access('rep_antiguedad', 'ver'), active: currentRoute == 'rep_antiguedad'},
    {route: 'rep_estado', label: 'menu.reportes.estado_cuenta', allowed: has_access('rep_estado', 'ver'), active: currentRoute == 'rep_estado'},
    {route: 'rep_estado_documentos', label: 'menu.reportes.documentos_pendientes', allowed: has_access('rep_estado_documentos', 'ver'), active: currentRoute == 'rep_estado_documentos'},
    {route: 'rep_resumen_prov', label: 'menu.reportes.resumen_proveedores', allowed: has_access('rep_resumen_prov', 'ver'), active: currentRoute == 'rep_resumen_prov'},
    {route: 'rep_resumen_prov_pagos', label: 'menu.reportes.pagos_aplicaciones', allowed: has_access('rep_resumen_prov_pagos', 'ver'), active: currentRoute == 'rep_resumen_prov_pagos'},
    {route: 'rep_gasto_centro_costo', label: 'menu.reportes.gasto_centro_costo', allowed: has_access('rep_gasto_centro_costo', 'ver'), active: currentRoute == 'rep_gasto_centro_costo'}
] %}

{% set userRole = user_role_level() %}
{% set adminActive = currentRoute starts with 'cliente' or currentRoute starts with 'admin_' or currentRoute starts with 'sitio' or currentRoute starts with 'usuario' or currentRoute starts with 'formato_pago' %}
{% set adminItems = [
    {route: 'cliente_index', label: 'menu.clientes', allowed: userRole == 1, active: currentRoute starts with 'cliente'},
    {route: 'admin_tenants_index', label: 'menu.tenants', allowed: userRole == 1, active: currentRoute starts with 'admin_tenants'},
    {route: 'sitio_index', label: 'menu.sitios', allowed: userRole == 1, active: currentRoute starts with 'sitio'},
    {route: 'admin_erp_config', label: 'menu.integracion_erp', allowed: userRole == 1, active: currentRoute starts with 'admin_erp'},
    {route: 'usuario_index', label: 'menu.usuarios', allowed: userRole <= 3, active: currentRoute starts with 'usuario'},
    {route: 'formato_pago_index', label: 'menu.formatos_pago', allowed: userRole <= 3, active: currentRoute starts with 'formato_pago'}
] %}

{% set catalogActive = currentRoute starts with 'banco' or currentRoute starts with 'clasificacion_proveedor' or currentRoute starts with 'cc_' or currentRoute starts with 'condpago' or currentRoute starts with 'formapago' or currentRoute starts with 'cuenta_' or currentRoute starts with 'idp_tasa' or currentRoute starts with 'imp_' or currentRoute starts with 'moneda' or currentRoute starts with 'pais' or currentRoute starts with 'proy' or currentRoute starts with 'regimen' or currentRoute starts with 'ret_' or currentRoute starts with 'tc_' or currentRoute starts with 'tdoc' or currentRoute starts with 'classdoc' or currentRoute starts with 'tipo_iva' %}
{% set bankAccountActive = currentRoute starts with 'cuenta_' and not (currentRoute starts with 'cuenta_contable') %}
{% set catalogItems = [
    {route: 'banco_index', label: 'menu.catalogos.bancos', allowed: has_access('banco', 'ver'), active: currentRoute starts with 'banco'},
    {route: 'cc_index', label: 'menu.catalogos.centros_costo', allowed: has_access('cc', 'ver'), active: currentRoute starts with 'cc_'},
    {route: 'clasificacion_proveedor_index', label: 'menu.catalogos.clasificaciones_proveedor', allowed: has_access('clasificacion_proveedor', 'ver'), active: currentRoute starts with 'clasificacion_proveedor'},
    {route: 'condpago_index', label: 'menu.catalogos.condiciones_pago', allowed: has_access('condpago', 'ver'), active: currentRoute starts with 'condpago'},
    {route: 'formapago_index', label: 'menu.catalogos.formas_pago', allowed: has_access('condpago', 'ver'), active: currentRoute starts with 'formapago'},
    {route: 'pais_index', label: 'menu.catalogos.paises', allowed: has_access('pais', 'ver'), active: currentRoute starts with 'pais'},
    {route: 'cuenta_index', label: 'menu.catalogos.cuentas_bancarias', allowed: has_access('cuenta', 'ver'), active: bankAccountActive},
    {route: 'cuenta_contable_index', label: 'menu.catalogos.cuentas_contables', allowed: has_access('cuenta_contable', 'ver'), active: currentRoute starts with 'cuenta_contable'},
    {route: 'regimen_index', label: 'menu.catalogos.regimen_fiscal', allowed: has_access('regimen', 'ver'), active: currentRoute starts with 'regimen'},
    {route: 'imp_index', label: 'menu.catalogos.impuestos', allowed: has_access('imp', 'ver'), active: currentRoute starts with 'imp_'},
    {route: 'moneda_index', label: 'menu.catalogos.monedas', allowed: has_access('moneda', 'ver'), active: currentRoute starts with 'moneda'},
    {route: 'proy_index', label: 'menu.catalogos.proyectos', allowed: has_access('proy', 'ver'), active: currentRoute starts with 'proy'},
    {route: 'ret_index', label: 'menu.catalogos.retenciones', allowed: has_access('ret', 'ver'), active: currentRoute starts with 'ret_'},
    {route: 'idp_tasa_index', label: 'menu.catalogos.idp_tasas', allowed: has_access('idp_tasa', 'ver'), active: currentRoute starts with 'idp_tasa'},
    {route: 'tc_index', label: 'menu.catalogos.tipos_cambio', allowed: has_access('tc', 'ver'), active: currentRoute starts with 'tc_'},
    {route: 'tipo_iva_index', label: 'menu.catalogos.tipos_iva', allowed: has_access('tipo_iva', 'ver'), active: currentRoute starts with 'tipo_iva'},
    {route: 'tdoc_index', label: 'menu.catalogos.tipos_documento', allowed: has_access('tdoc', 'ver'), active: currentRoute starts with 'tdoc'},
    {route: 'classdoc_index', label: 'menu.catalogos.clases_documento', allowed: has_access('classdoc', 'ver'), active: currentRoute starts with 'classdoc'}
] %}

<aside
    id="app-sidebar"
    x-ref="sidebar"
    class="sidebar"
    :class="desktop ? (sidebarCollapsed ? 'is-collapsed lg:w-20' : 'lg:w-64') : (mobileSidebarOpen ? 'translate-x-0 w-72' : '-translate-x-full w-72')"
    :role="desktop ? 'navigation' : 'dialog'"
    :aria-modal="desktop ? null : 'true'"
    :aria-hidden="(!desktop && !mobileSidebarOpen).toString()"
    aria-label="{{ 'navigation.primary'|trans }}"
    @keydown.tab="trapSidebarFocus($event)"
    @keydown.escape.stop="closeMobileSidebar()"
    x-cloak
>
    <div class="flex h-full min-h-0 flex-col">
        {{ render(controller('App\\Controller\\ContextController::selector')) }}

        <nav class="sidebar-nav" aria-label="{{ 'navigation.modules'|trans }}">
            <div class="sidebar-section-title" x-show="sidebarExpanded">{{ 'navigation.operation'|trans }}</div>

            <a href="{{ path('home') }}" class="sidebar-link {{ currentRoute == 'home' ? 'active' : '' }}" aria-label="{{ 'menu.dashboard'|trans }}" {% if currentRoute == 'home' %}aria-current="page"{% endif %} @click="closeMobileSidebar()">
                <svg class="h-5 w-5 flex-none" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m3 12 9-9 9 9M5 10v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V10M9 21v-6h6v6"/></svg>
                <span x-show="sidebarExpanded">{{ 'menu.dashboard'|trans }}</span>
            </a>

            {% if has_access('proveedor', 'ver') %}
                <a href="{{ path('proveedor_index') }}" class="sidebar-link {{ currentRoute starts with 'proveedor' ? 'active' : '' }}" aria-label="{{ 'menu.proveedores'|trans }}" {% if currentRoute starts with 'proveedor' %}aria-current="page"{% endif %} @click="closeMobileSidebar()">
                    <svg class="h-5 w-5 flex-none" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm13 10v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg>
                    <span x-show="sidebarExpanded">{{ 'menu.proveedores'|trans }}</span>
                </a>
            {% endif %}

            {% if has_access('documento', 'ver') %}
                <a href="{{ path('documento_index') }}" class="sidebar-link {{ currentRoute starts with 'documento' ? 'active' : '' }}" aria-label="{{ 'menu.documentos'|trans }}" {% if currentRoute starts with 'documento' %}aria-current="page"{% endif %} @click="closeMobileSidebar()">
                    <svg class="h-5 w-5 flex-none" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Zm0 0v6h6M8 13h8M8 17h8"/></svg>
                    <span x-show="sidebarExpanded">{{ 'menu.documentos'|trans }}</span>
                </a>
            {% endif %}

            {% if has_access('pago', 'ver') %}
                <a href="{{ path('pago_index') }}" class="sidebar-link {{ currentRoute starts with 'pago' ? 'active' : '' }}" aria-label="{{ 'menu.pagos'|trans }}" {% if currentRoute starts with 'pago' %}aria-current="page"{% endif %} @click="closeMobileSidebar()">
                    <svg class="h-5 w-5 flex-none" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7H5a3 3 0 0 0 0 6h14a2 2 0 0 1 0 4H5M16 3v18M8 3v18"/></svg>
                    <span x-show="sidebarExpanded">{{ 'menu.pagos'|trans }}</span>
                </a>
            {% endif %}

            {% if reportItems|filter(item => item.allowed)|length %}
                <div class="sidebar-section-title" x-show="sidebarExpanded">{{ 'navigation.reports'|trans }}</div>
                <div x-data="sidebarGroup({{ currentRoute starts with 'rep_' ? 'true' : 'false' }})">
                    <button x-ref="trigger" type="button" class="sidebar-link sidebar-group-trigger {{ currentRoute starts with 'rep_' ? 'active' : '' }}" aria-label="{{ 'menu.reportes'|trans }}" aria-controls="sidebar-reports" :aria-expanded="(sidebarExpanded ? open : flyout).toString()" @click="toggle($event.currentTarget)" @keydown.arrow-right.prevent="toggle($event.currentTarget); focusFlyout()" @keydown.escape.stop="closeFlyout(true)">
                        <svg class="h-5 w-5 flex-none" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 19V9m5 10V5m5 14v-7m5 7V3"/></svg>
                        <span x-show="sidebarExpanded">{{ 'menu.reportes'|trans }}</span>
                        <svg x-show="sidebarExpanded" class="ml-auto h-4 w-4 transition-transform duration-150" :class="open && 'rotate-180'" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6"/></svg>
                    </button>
                    <div id="sidebar-reports" class="sidebar-submenu" x-show="open && sidebarExpanded">{{ sidebarUi.submenu_links(reportItems, false) }}</div>
                    <template x-teleport="body">
                        <div x-ref="flyout" class="sidebar-flyout" x-show="desktop && sidebarCollapsed && flyout" x-cloak :style="flyoutStyle" @click.outside="closeFlyout()" @keydown.escape.stop="closeFlyout(true)" role="menu" aria-label="{{ 'menu.reportes'|trans }}">
                            <p class="sidebar-flyout-title">{{ 'menu.reportes'|trans }}</p>
                            {{ sidebarUi.submenu_links(reportItems, true) }}
                        </div>
                    </template>
                </div>
            {% endif %}

            {% if userRole <= 3 %}
                <div class="sidebar-section-title" x-show="sidebarExpanded">{{ 'navigation.administration'|trans }}</div>
                <div x-data="sidebarGroup({{ adminActive ? 'true' : 'false' }})">
                    <button x-ref="trigger" type="button" class="sidebar-link sidebar-group-trigger {{ adminActive ? 'active' : '' }}" aria-label="{{ 'menu.administracion'|trans }}" aria-controls="sidebar-admin" :aria-expanded="(sidebarExpanded ? open : flyout).toString()" @click="toggle($event.currentTarget)" @keydown.arrow-right.prevent="toggle($event.currentTarget); focusFlyout()" @keydown.escape.stop="closeFlyout(true)">
                        <svg class="h-5 w-5 flex-none" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.4 15a1.7 1.7 0 0 0 .34 1.88l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06A1.7 1.7 0 0 0 15 19.4a1.7 1.7 0 0 0-1 .6 1.7 1.7 0 0 0-.4 1.1V21a2 2 0 1 1-4 0v-.09A1.7 1.7 0 0 0 8.6 19.4a1.7 1.7 0 0 0-1.88.34l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.7 1.7 0 0 0 4.6 15a1.7 1.7 0 0 0-.6-1 1.7 1.7 0 0 0-1.1-.4H3a2 2 0 1 1 0-4h.09A1.7 1.7 0 0 0 4.6 8.6a1.7 1.7 0 0 0-.34-1.88l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.7 1.7 0 0 0 9 4.6a1.7 1.7 0 0 0 1-.6 1.7 1.7 0 0 0 .4-1.1V3a2 2 0 1 1 4 0v.09A1.7 1.7 0 0 0 15.4 4.6a1.7 1.7 0 0 0 1.88-.34l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.7 1.7 0 0 0 19.4 9c.14.37.36.7.66.96.3.25.68.4 1.08.4H21a2 2 0 1 1 0 4h-.09a1.7 1.7 0 0 0-1.51.64Z"/></svg>
                        <span x-show="sidebarExpanded">{{ 'menu.administracion'|trans }}</span>
                        <svg x-show="sidebarExpanded" class="ml-auto h-4 w-4 transition-transform duration-150" :class="open && 'rotate-180'" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6"/></svg>
                    </button>
                    <div id="sidebar-admin" class="sidebar-submenu" x-show="open && sidebarExpanded">{{ sidebarUi.submenu_links(adminItems, false) }}</div>
                    <template x-teleport="body">
                        <div x-ref="flyout" class="sidebar-flyout" x-show="desktop && sidebarCollapsed && flyout" x-cloak :style="flyoutStyle" @click.outside="closeFlyout()" @keydown.escape.stop="closeFlyout(true)" role="menu" aria-label="{{ 'menu.administracion'|trans }}">
                            <p class="sidebar-flyout-title">{{ 'menu.administracion'|trans }}</p>
                            {{ sidebarUi.submenu_links(adminItems, true) }}
                        </div>
                    </template>
                </div>
            {% endif %}

            {% if catalogItems|filter(item => item.allowed)|length %}
                <div class="sidebar-section-title" x-show="sidebarExpanded">{{ 'navigation.configuration'|trans }}</div>
                <div x-data="sidebarGroup({{ catalogActive ? 'true' : 'false' }})">
                    <button x-ref="trigger" type="button" class="sidebar-link sidebar-group-trigger {{ catalogActive ? 'active' : '' }}" aria-label="{{ 'menu.catalogos'|trans }}" aria-controls="sidebar-catalogs" :aria-expanded="(sidebarExpanded ? open : flyout).toString()" @click="toggle($event.currentTarget)" @keydown.arrow-right.prevent="toggle($event.currentTarget); focusFlyout()" @keydown.escape.stop="closeFlyout(true)">
                        <svg class="h-5 w-5 flex-none" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
                        <span x-show="sidebarExpanded">{{ 'menu.catalogos'|trans }}</span>
                        <svg x-show="sidebarExpanded" class="ml-auto h-4 w-4 transition-transform duration-150" :class="open && 'rotate-180'" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6"/></svg>
                    </button>
                    <div id="sidebar-catalogs" class="sidebar-submenu" x-show="open && sidebarExpanded">{{ sidebarUi.submenu_links(catalogItems, false) }}</div>
                    <template x-teleport="body">
                        <div x-ref="flyout" class="sidebar-flyout" x-show="desktop && sidebarCollapsed && flyout" x-cloak :style="flyoutStyle" @click.outside="closeFlyout()" @keydown.escape.stop="closeFlyout(true)" role="menu" aria-label="{{ 'menu.catalogos'|trans }}">
                            <p class="sidebar-flyout-title">{{ 'menu.catalogos'|trans }}</p>
                            <div class="max-h-[min(70vh,34rem)] overflow-y-auto">{{ sidebarUi.submenu_links(catalogItems, true) }}</div>
                        </div>
                    </template>
                </div>
            {% endif %}
        </nav>

        <div class="sidebar-profile" x-data="menuDropdown">
            <button x-ref="trigger" type="button" class="sidebar-profile-button" @click="toggle()" :aria-expanded="open.toString()" aria-haspopup="menu" aria-controls="sidebar-profile-menu" aria-label="{{ 'user.profile_menu'|trans }}">
                {% if currentUserPhoto %}
                    <img src="{{ currentUserPhoto }}" alt="" class="h-10 w-10 rounded-control object-cover">
                {% else %}
                    <span class="sidebar-avatar" aria-hidden="true">{{ currentUserInitials }}</span>
                {% endif %}
                <span class="min-w-0 flex-1 text-left" x-show="sidebarExpanded">
                    <span class="block truncate text-sm font-semibold text-white">{{ currentUserName }}</span>
                    <span class="mt-0.5 block truncate text-xs text-neutral-400">{{ currentUserRole }}</span>
                </span>
                <svg x-show="sidebarExpanded" class="h-4 w-4 flex-none text-neutral-400" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24"><circle cx="5" cy="12" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/></svg>
            </button>
            <div id="sidebar-profile-menu" x-ref="menu" x-show="open" x-cloak @click.outside="close()" @keydown.escape.stop="close(); $refs.trigger.focus()" class="sidebar-profile-menu" :class="sidebarExpanded ? 'bottom-full left-0 mb-2' : 'bottom-0 left-full ml-2'" role="menu">
                <a href="{{ path('perfil_edit') }}" role="menuitem">{{ 'user.edit_profile'|trans }}</a>
                <a href="{{ path('logout') }}" role="menuitem">{{ 'user.logout'|trans }}</a>
            </div>
        </div>
    </div>
</aside>