@if (node) {
  <div class="folder-view">
    <!-- Fil d'Ariane : Lore → ancêtres → dossier courant -->
    <nav class="breadcrumb" [attr.aria-label]="'folderView.breadcrumb' | translate">
      @if (lore) {
        <button type="button" class="crumb" (click)="navigateToLoreRoot()">
          {{ lore.name }}
        </button>
      }
      @for (ancestor of ancestors; track ancestor) {
        <lucide-icon [img]="ChevronRight" [size]="12" class="crumb-sep"></lucide-icon>
        <button type="button" class="crumb" (click)="navigateToSubfolder(ancestor.id!)">
          {{ ancestor.name }}
        </button>
      }
      <lucide-icon [img]="ChevronRight" [size]="12" class="crumb-sep"></lucide-icon>
      <span class="crumb current">{{ node.name }}</span>
    </nav>
    <!-- Header : icône + nom + actions -->
    <div class="detail-header">
      <div class="header-texts">
        <h1>
          <lucide-icon [img]="folderIcon" [size]="24" class="title-icon"></lucide-icon>
          {{ node.name }}
        </h1>
        <p class="description">
          {{ 'folderView.summary' | translate:{ folders: subfolders.length, pages: pages.length } }}
        </p>
      </div>
      <div class="header-actions">
        <button type="button" class="btn-secondary" (click)="navigateToEdit()" [title]="'folderView.editTitle' | translate">
          <lucide-icon [img]="Pencil" [size]="14"></lucide-icon>
          {{ 'common.edit' | translate }}
        </button>
        <button type="button" class="btn-danger" (click)="delete()" [title]="'folderView.deleteTitle' | translate">
          <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
          {{ 'common.delete' | translate }}
        </button>
      </div>
    </div>
    <!-- Sous-dossiers -->
    <section class="detail-section">
      <div class="section-header">
        <h2>{{ 'folderView.subfolders' | translate }}</h2>
        <button class="btn-add" (click)="navigateToCreateSubfolder()">
          <lucide-icon [img]="Plus" [size]="14"></lucide-icon>
          {{ 'folderView.newSubfolder' | translate }}
        </button>
      </div>
      @if (subfolders.length > 0) {
        <div class="items-grid">
          @for (sub of subfolders; track sub) {
            <div class="node-card" (click)="navigateToSubfolder(sub.id!)">
              <lucide-icon [img]="Folder" [size]="24" class="node-icon"></lucide-icon>
              <span class="node-name">{{ sub.name }}</span>
            </div>
          }
        </div>
      }
      @if (subfolders.length === 0) {
        <div class="empty-state">
          <p>{{ 'folderView.noSubfolders' | translate }}</p>
        </div>
      }
    </section>
    <!-- Pages -->
    <section class="detail-section">
      <div class="section-header">
        <h2>{{ 'folderView.pages' | translate }}</h2>
        <button class="btn-add" (click)="navigateToCreatePage()">
          <lucide-icon [img]="Plus" [size]="14"></lucide-icon>
          {{ 'folderView.newPage' | translate }}
        </button>
      </div>
      @if (pages.length > 0) {
        <div class="items-grid">
          @for (page of pages; track page) {
            <div class="node-card" (click)="navigateToPage(page.id!)">
              <lucide-icon [img]="FileText" [size]="24" class="node-icon"></lucide-icon>
              <span class="node-name">{{ page.title }}</span>
            </div>
          }
        </div>
      }
      @if (pages.length === 0) {
        <div class="empty-state">
          <p>{{ 'folderView.noPages' | translate }}</p>
        </div>
      }
    </section>
  </div>
}