<z-layout class="border overflow-hidden bg-pmu-vert min-h-screen h-full">
  <z-sidebar
    [zWidth]="250"
    [zCollapsible]="true"
    [zCollapsed]="sidebarCollapsed()"
    [zCollapsedWidth]="70"
    (zCollapsedChange)="onCollapsedChange($event)"
    class="!p-0 dark:!bg-pmu-vert/10 !bg-surface"
  >
    <nav
      [class]="
        'flex flex-col h-full overflow-hidden ' +
        (sidebarCollapsed() ? 'gap-1 p-1 pt-4' : 'gap-4 p-4')
      "
    >
      <div class="flex items-center justify-center">
        <app-pmu-logo></app-pmu-logo>
      </div>

      <z-sidebar-group>
        @if (!sidebarCollapsed()) {
        <z-sidebar-group-label>Menu principal</z-sidebar-group-label>
        } @for (item of mainMenuItems; track item.label) {
        <button
          z-button
          zType="ghost"
          [class]="
            (sidebarCollapsed() ? 'justify-center' : 'justify-start') +
            (isActive(item.link || '', item.exact || false)
              ? ' !bg-primary/10 !text-primary'
              : ' hover:bg-accent')
          "
          [zTooltip]="sidebarCollapsed() ? item.label : ''"
          zPosition="right"
          (click)="navigate(item?.link)"
        >
          @if (isEmoji(item.icon)) {
          <span class="text-lg">{{ item.icon }}</span>
          } @else {
          <i [class]="item.icon + (sidebarCollapsed() ? '' : ' mr-2')" aria-hidden="true"></i>
          } @if (!sidebarCollapsed()) {
          <span>{{ item.label }}</span>
          }
        </button>
        }
      </z-sidebar-group>

      <z-sidebar-group>
        @if (!sidebarCollapsed()) {
        <z-sidebar-group-label>Agents & Utilisateurs</z-sidebar-group-label>
        } @for (item of workspaceMenuItems; track item.label) { @if (item.submenu) {
        <button
          z-button
          zType="ghost"
          z-menu
          [zMenuTriggerFor]="submenu"
          zPlacement="rightTop"
          [class]="
            (sidebarCollapsed() ? 'justify-center' : 'justify-start') +
            (isAnyActive(item) ? ' !bg-primary/10 !text-primary' : ' hover:bg-accent')
          "
          [zTooltip]="sidebarCollapsed() ? item.label : null"
          zPosition="right"
        >
          <i [class]="sidebarCollapsed() ? item.icon : item.icon + ' mr-2'"></i>
          @if (!sidebarCollapsed()) {
          <span class="flex-1 text-left">{{ item.label }}</span>
          <i class="icon-chevron-right"></i>
          }
        </button>

        <ng-template #submenu>
          <div z-menu-content class="w-48">
            @for (subitem of item.submenu; track subitem.label) {
            <button
              z-menu-item
              [class]="isActive(subitem.link || '', subitem.exact || false) ? '!text-primary' : ''"
              (click)="navigate(subitem.link)"
            >
              {{ subitem.label }}
            </button>
            }
          </div>
        </ng-template>
        } @else {
        <button
          z-button
          zType="ghost"
          [class]="
            (sidebarCollapsed() ? 'justify-center' : 'justify-start') +
            (isActive(item.link || '', item.exact || false)
              ? ' !bg-primary/10 !text-primary'
              : ' hover:bg-accent')
          "
          [zTooltip]="sidebarCollapsed() ? item.label : ''"
          zPosition="right"
          (click)="navigate(item?.link)"
        >
          <i [class]="sidebarCollapsed() ? item.icon : item.icon + ' mr-2'"></i>
          @if (!sidebarCollapsed()) {
          <span>{{ item.label }}</span>
          }
        </button>
        } }
      </z-sidebar-group>

      <div class="mt-auto">
        <div
          z-menu
          [zMenuTriggerFor]="userMenu"
          zPlacement="rightBottom"
          [class]="
            'flex items-center justify-center gap-2 cursor-pointer rounded-md hover:bg-accent ' +
            (sidebarCollapsed() ? 'p-0 m-2' : 'p-2')
          "
        >
          <z-avatar zSize="sm" [zImage]="avatar" />

          @if (!sidebarCollapsed()) {
          <div>
            <span class="font-medium text-sm truncate">{{ user()?.nom }} {{ user()?.prenom }}</span>
            <div class="text-xs">{{ user()?.identifiant }}</div>
          </div>

          <i class="icon-chevrons-up-down ml-auto"></i>
          }
        </div>

        <ng-template #userMenu>
          <div z-menu-content class="w-48">
            <button z-menu-item (click)="navigate('/profile')">
              <i class="icon-user mr-2"></i>
              Profile
            </button>
            <z-divider zSpacing="sm" />
            <button z-menu-item (click)="logout()">
              <i class="icon-log-out mr-2"></i>
              Déconnexion
            </button>
          </div>
        </ng-template>
      </div>
    </nav>
  </z-sidebar>

  <!-- min-h-[200px] is just for the demo purpose to have a minimum height -->
  <z-content class="min-h-screen">
    <div class="flex items-center">
      <button
        z-button
        zType="ghost"
        zSize="sm"
        class="-ml-2 dark:text-white text-black"
        (click)="toggleSidebar()"
      >
        <i class="icon-panel-left"></i>
      </button>

      <z-divider zOrientation="vertical" class="h-4 ml-2" />

      <z-breadcrumb>
        <z-breadcrumb-list zWrap="wrap" zAlign="start">
          <z-breadcrumb-item>
            <z-breadcrumb-link zLink="/docs/components/layout">Home</z-breadcrumb-link>
          </z-breadcrumb-item>
          <z-breadcrumb-separator />
          <z-breadcrumb-item>
            <z-breadcrumb-link zLink="/docs/components/layout">Components</z-breadcrumb-link>
          </z-breadcrumb-item>
        </z-breadcrumb-list>
      </z-breadcrumb>

      <div class="ml-auto flex justify-end items-center">
        <app-mode-toggle></app-mode-toggle>
      </div>
    </div>

    <div class="space-y-4 py-4 text-text">
      <router-outlet></router-outlet>
    </div>
  </z-content>
</z-layout>
