{#
    Sidebar Component - Navigation latérale responsive

    Paramètres:
    - appName: Nom de l'application (défaut: "2ABCORP")
    - appLogo: URL du logo (défaut: logo par défaut)

    Le menu est chargé dynamiquement selon le rôle actif de l'utilisateur
#}

{% set appName = appName|default('YIMA-SHOP') %}
{% set appLogo = appLogo|default(asset('logo.png')) %}
{% set activeRole = active_role() %}

<aside id="top-bar-sidebar"
       data-drawer="drawer"
       tabindex="-1"
       class="fixed top-0 left-0 z-40 w-64 h-full transition-transform -translate-x-full sm:translate-x-0"
       aria-label="Sidebar">
   <div class="h-full px-3 py-4 overflow-y-auto bg-neutral-primary-soft border-e border-default">
      {# Logo en haut #}
      <a href="{{ path(role_dashboard_route(activeRole)) }}" class="flex items-center ps-2.5 mb-5">
         <img src="{{ appLogo }}" class="h-6 me-3" alt="{{ appName }} Logo" />
         <span class="self-center text-lg text-heading font-semibold whitespace-nowrap">{{ appName }}</span>
      </a>

      {# Hiérarchie des rôles #}
      {% if activeRole == 'ROLE_ADMIN' %}
         {% include 'components/menus/_menu_admin.html.twig' %}
      {% elseif activeRole == 'ROLE_MANAGER' %}
         {% include 'components/menus/_menu_manager.html.twig' %}
      {% elseif activeRole == 'ROLE_EMPLOYER' %}
         {% include 'components/menus/_menu_employer.html.twig' %}
      {% else %}
         {# Menu par défaut si aucun rôle n'est actif #}
         <ul class="space-y-2 font-medium">
            <li>
               <a href="{{ path('app_home') }}" class="flex items-center px-2 py-1.5 text-body rounded-base hover:bg-neutral-tertiary hover:text-fg-brand group">
                  <svg class="w-5 h-5 transition duration-75 group-hover:text-fg-brand" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                     <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m4 12 8-8 8 8M6 10.5V19a1 1 0 0 0 1 1h3v-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3h3a1 1 0 0 0 1-1v-8.5"/>
                  </svg>
                  <span class="ms-3">Accueil</span>
               </a>
            </li>
         </ul>
      {% endif %}

      {# Section utilisateur en bas #}
      <div class="mt-auto pt-4 mt-6 border-t border-default">
         <div class="flex items-center px-2 py-2 text-body">
            <img src="{{ app.user.profilePhoto|profile_picture_url }}" alt="Photo de profil" class="w-8 h-8 rounded-full me-3">
            <div class="flex-1">
               <div class="text-sm font-medium text-heading">{{ app.user ? (app.user.firstName ~ ' ' ~ app.user.lastName)|trim : 'Utilisateur' }}</div>
               <div class="text-xs text-body">{{ role_label(activeRole) }}</div>
            </div>
         </div>

         {# Version de l'application #}
         <div class="px-2 py-2 mt-2 text-center border-t border-default">
            <p class="text-xs text-body-light">
               Version <span class="font-mono text-fg-brand-strong">{{ app_version }}</span>
            </p>
            <p class="text-xs text-body-light mt-0.5">
               &copy; {{ 'now'|date('Y') }} 2AB Group
            </p>
         </div>
      </div>
   </div>
</aside>