<aside class="sidebar">

  <div class="sidebar-header">
    <div class="logo">
      <span class="logo-icon">✦</span>
      <span class="logo-text">LoreMind</span>
    </div>
    <p class="logo-subtitle">THE DIGITAL CODEX</p>
  </div>

  <div class="nav-toggle">
    <button class="toggle-btn" [class.active]="currentRoute.startsWith('/lore')" (click)="navigateTo('/lore')">
      Lore
    </button>
    <button class="toggle-btn" [class.active]="currentRoute.startsWith('/campaigns')" (click)="navigateTo('/campaigns')">
      Campagne
    </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">OUTILS</p>
    <button class="tool-btn" (click)="openSearch()">
      <lucide-icon [img]="Search" [size]="16"></lucide-icon>
      <span>Recherche globale</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>Systèmes de JDR</span>
    </button>
    @if (!config.demoMode) {
      <button class="tool-btn">
        <lucide-icon [img]="Download" [size]="16"></lucide-icon>
        <span>Export VTT</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>Paramètres</span>
        @if (updateAvailable$ | async) {
          <span class="update-badge" title="Mise a jour disponible">MAJ</span>
        }
      </button>
    }
  </div>

  <div class="sidebar-footer">
    <span class="version">Version {{ appVersion }}</span>
  </div>

</aside>
