@props(['user' => null])
@php
  $user ??= auth('cmu')->user() ?? auth()->user();

  if ($user) {
      $displayName = trim(($user->prenoms ?? '').' '.($user->nom ?? ''));
      if ($displayName === '') {
          $displayName = $user->nom_complet ?? $user->name ?? 'Agent AMU';
      }
      $rolesCollection = method_exists($user, 'getAttribute') ? ($user->roles ?? collect()) : collect();
      $displayRole = $rolesCollection->pluck('libelle')->filter()->first()
          ?? $user->role_libelle ?? $user->role ?? 'Agent AMU';
  } else {
      $displayName = 'Agent AMU';
      $displayRole = 'Agent';
  }

  $initials = collect(preg_split('/\s+/', $displayName))
      ->filter()
      ->take(2)
      ->map(fn ($part) => mb_strtoupper(mb_substr($part, 0, 1)))
      ->implode('');
@endphp
<aside class="fixed top-0 bottom-0 left-[6px] w-[248px] bg-white border-r border-gray-200 flex flex-col z-[100]
              transform transition-transform duration-300 ease-in-out lg:translate-x-0"
       :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full'">

  <div class="px-5 py-6 flex items-center gap-3">
    <div class="w-10 h-10 rounded-full bg-cmu-green-800 flex items-center justify-center shadow-cmu-card">
      <span class="text-cmu-gold-500 font-display text-lg italic">C</span>
    </div>
    <div class="flex flex-col leading-tight">
      <span class="font-display text-cmu-green-900 text-[17px] font-semibold">AMU</span>
      <span class="text-[10px] text-cmu-gold-600 font-semibold tracking-[0.16em] uppercase">{{ config('cmu.agence.sigle') }}</span>
      <span class="text-[11px] text-cmu-ink tracking-[0.15em] uppercase">Guinée</span>
    </div>
    {{-- Fermeture du drawer (mobile/tablette uniquement) --}}
    <button type="button"
            @click="sidebarOpen = false"
            class="ml-auto lg:hidden w-9 h-9 rounded-cmu border border-gray-300 text-cmu-ink hover:border-cmu-green-600 hover:text-cmu-green-800 transition flex items-center justify-center"
            aria-label="Fermer le menu">
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
      </svg>
    </button>
  </div>

  <nav class="flex-1 overflow-y-auto px-3 pb-4 space-y-6">
    {{ $slot }}
  </nav>

  <div class="px-5 pb-2 text-[10px] italic text-gray-500">
    Plateforme {{ config('cmu.agence.sigle') }}
  </div>

  <div class="px-4 py-4 border-t border-gray-200 flex items-center gap-3">
    <div class="w-9 h-9 rounded-full bg-cmu-green-100 text-cmu-green-800 flex items-center justify-center font-semibold text-sm">
      {{ $initials ?: 'A' }}
    </div>
    <div class="flex-1 min-w-0">
      <div class="text-sm font-semibold text-cmu-charcoal truncate">{{ $displayName }}</div>
      <div class="text-xs text-cmu-ink truncate">{{ $displayRole }}</div>
    </div>
    <form method="POST" action="{{ route('logout', absolute: false) }}" x-data class="flex-shrink-0">
      @csrf
      <button type="submit"
              class="w-8 h-8 rounded-cmu border border-gray-300 text-cmu-ink hover:border-cmu-red-600 hover:text-cmu-red-600 hover:bg-cmu-red-100 transition flex items-center justify-center"
              title="Déconnexion">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
          <polyline points="16 17 21 12 16 7"/>
          <line x1="21" y1="12" x2="9" y2="12"/>
        </svg>
      </button>
    </form>
  </div>

</aside>