<aside id="layout-menu" class="layout-menu menu-vertical menu bg-menu-theme">

  <!-- App Brand -->
  @if(!isset($navbarFull))
    <div class="app-brand demo">
      <a href="{{ url('/') }}" class="app-brand-link">
        <span class="app-brand-logo demo">
          <img src="{{ $this->settings->app_logo ? asset('assets/img/'.$this->settings->app_logo) : asset('assets/img/logo.png') }}"
               alt="Logo"
               width="27">
        </span>
        <span class="app-brand-text demo menu-text fw-bold ms-2">
          {{ $this->settings->app_name ?? config('variables.templateName') }}
        </span>
      </a>

      <a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-auto">
        <i class="bx bx-chevron-left bx-sm d-flex align-items-center justify-content-center"></i>
      </a>
    </div>
  @endif

  <div class="menu-inner-shadow"></div>

  <ul class="menu-inner py-1">
    @foreach ($this->menu as $menu)
      @if(!$this->isVisible($menu))
        @continue
      @endif

      {{-- Menu headers --}}
      @if (isset($menu->menuHeader))
        <li class="menu-header small text-uppercase">
          <span class="menu-header-text">{{ __($menu->menuHeader) }}</span>
        </li>
      @else
        @php
          $isActive = $this->isActive($menu);
          $hasSubmenu = isset($menu->submenu);
          $activeClass = $isActive ? ($hasSubmenu ? 'active open' : 'active') : '';
        @endphp

        <li class="menu-item {{ $activeClass }}" wire:key="menu-{{ $loop->index }}">
          <a href="{{ isset($menu->url) ? url($menu->url) : 'javascript:void(0);' }}"
             class="{{ $hasSubmenu ? 'menu-link menu-toggle' : 'menu-link' }}"
             @if(isset($menu->target) && !empty($menu->target)) target="_blank" @endif>
            @isset($menu->icon)
              <i class="{{ $menu->icon }}"></i>
            @endisset
            <div>{{ isset($menu->name) ? __($menu->name) : '' }}</div>
            @isset($menu->badge)
              <div class="badge bg-{{ $menu->badge[0] }} rounded-pill ms-auto">{{ $menu->badge[1] }}</div>
            @endisset
          </a>

          {{-- Submenu --}}
          @if($hasSubmenu)
            @include('livewire.partials.sidebar-submenu', ['menu' => $menu->submenu, 'parentIndex' => $loop->index])
          @endif
        </li>
      @endif
    @endforeach
  </ul>

  <!-- User Profile Card - Sticky Bottom -->
  @auth
  @php $authUser = auth()->user(); @endphp
  <div class="menu-user-profile">
    <div class="user-profile-card">
      <div class="dropdown">
        <a class="user-profile-toggle" href="javascript:void(0);" data-bs-toggle="dropdown" aria-expanded="false">
          <div class="d-flex align-items-center gap-3 p-3">
            <div class="avatar avatar-lg avatar-online">
              @if(!is_null($authUser->profile_picture))
                <img src="{{ $authUser->getProfilePicture() }}" alt="{{ $authUser->getFullName() }}" class="rounded-circle">
              @else
                <span class="avatar-initial rounded-circle bg-primary">{{ $authUser->getInitials() }}</span>
              @endif
            </div>
            <div class="user-info flex-grow-1">
              <h6 class="mb-0 fw-semibold text-heading">{{ $authUser->getFullName() }}</h6>
              <small class="text-muted">{{ $authUser->roles()->first()->name ?? __('User') }}</small>
            </div>
            <i class="bx bx-chevron-up"></i>
          </div>
        </a>
        <ul class="dropdown-menu dropdown-menu-end modern-dropdown w-100">
          <li>
            <a class="dropdown-item" href="{{ route('account.myProfile') }}">
              <i class="bx bx-user me-2"></i>
              <span class="align-middle">@lang('My Profile')</span>
            </a>
          </li>
          <li>
            <div class="dropdown-divider"></div>
          </li>
          <li>
            <a class="dropdown-item text-danger" href="{{ route('auth.logout') }}"
               onclick="event.preventDefault(); document.getElementById('logout-form-menu').submit();">
              <i class='bx bx-power-off me-2'></i>
              <span class="align-middle">@lang('Logout')</span>
            </a>
          </li>
          <form method="POST" id="logout-form-menu" action="{{ route('auth.logout') }}">
            @csrf
          </form>
        </ul>
      </div>
    </div>
  </div>
  @endauth

</aside>
