<aside class="sidebar">

  <div class="sidebar-header">
    <div class="logo">
      <img class="logo-img" src="assets/logo.png" alt="DM Loremind" />
      <span class="logo-text">DM Loremind</span>
    </div>
    <p class="logo-subtitle">{{ 'sidebar.subtitle' | translate }}</p>
  </div>

  <div class="nav-toggle">
    <button class="toggle-btn" [class.active]="currentRoute.startsWith('/lore')" (click)="navigateTo('/lore')">
      {{ 'sidebar.tabLore' | translate }}
    </button>
    <button class="toggle-btn" [class.active]="currentRoute.startsWith('/campaigns')" (click)="navigateTo('/campaigns')">
      {{ 'sidebar.tabCampaign' | translate }}
    </button>
  </div>

  <!-- Mode contextuel : liste des lores ou campagnes -->
  @if (layoutConfig$ | async; as config) {
    <div class="context-list">
      @for (item of config.globalItems; track item) {
        <button
          class="context-item"
          [class.active]="isActive(item.route)"
          (click)="navigateTo(item.route)">
          {{ item.name }}
        </button>
      }
    </div>
    <div class="spacer"></div>
    <button class="btn-back-all" (click)="navigateTo(config.globalBackRoute)">
      <lucide-icon [img]="ArrowLeft" [size]="14"></lucide-icon>
      <span>{{ config.globalBackLabel }}</span>
    </button>
  }

  <!-- Mode normal : spacer + outils -->
  @if (!(layoutConfig$ | async)) {
    <div class="spacer"></div>
  }

  <div class="tools-section">
    <p class="tools-label">{{ 'sidebar.toolsLabel' | translate }}</p>
    <button class="tool-btn" (click)="openSearch()">
      <lucide-icon [img]="Search" [size]="16"></lucide-icon>
      <span>{{ 'sidebar.globalSearch' | translate }}</span>
      <span class="tool-kbd">Ctrl+K</span>
    </button>
    <button class="tool-btn" [class.active]="currentRoute.startsWith('/game-systems')" (click)="navigateTo('/game-systems')">
      <lucide-icon [img]="Dices" [size]="16"></lucide-icon>
      <span>{{ 'sidebar.gameSystems' | translate }}</span>
    </button>
    @if (!config.demoMode) {
      <button class="tool-btn" [class.active]="currentRoute.startsWith('/settings')" (click)="navigateTo('/settings')">
        <lucide-icon [img]="Settings" [size]="16"></lucide-icon>
        <span>{{ 'sidebar.settings' | translate }}</span>
        @if (updateAvailable$ | async) {
          <span class="update-badge" [title]="'sidebar.updateAvailable' | translate">{{ 'sidebar.updateBadge' | translate }}</span>
        }
      </button>
    }
  </div>

  <div class="sidebar-footer">
    <span class="version">{{ 'sidebar.version' | translate:{ version: appVersion } }}</span>
  </div>

</aside>
