@if (lore) {
  <div class="lore-detail">
    <!-- ============ Header : mode lecture ============ -->
    @if (!editing) {
      <div class="detail-header">
        <div class="header-texts">
          <h1>{{ lore.name }}</h1>
          <p class="description">{{ lore.description }}</p>
        </div>
        <div class="header-actions">
          <button type="button" class="btn-secondary" (click)="openGraph()"
            [title]="'loreDetail.graphTitle' | translate">
            <lucide-icon [img]="Network" [size]="14"></lucide-icon>
            {{ 'loreDetail.graph' | translate }}
          </button>
          <button type="button" class="btn-secondary" (click)="startEdit()" [title]="'loreDetail.editTitle' | translate">
            <lucide-icon [img]="Pencil" [size]="14"></lucide-icon>
            {{ 'common.edit' | translate }}
          </button>
          <button type="button" class="btn-danger" (click)="deleteLore()" [title]="'loreDetail.deleteTitle' | translate">
            <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
            {{ 'common.delete' | translate }}
          </button>
        </div>
      </div>
    }
    <!-- ============ Header : mode édition inline ============ -->
    @if (editing) {
      <div class="detail-header edit-mode">
        <div class="field">
          <label for="lore-detail-edit-name">{{ 'common.name' | translate }}</label>
          <input id="lore-detail-edit-name" type="text" [(ngModel)]="editName" name="editName" required />
        </div>
        <div class="field">
          <label for="lore-detail-edit-description">{{ 'common.description' | translate }}</label>
          <textarea id="lore-detail-edit-description" [(ngModel)]="editDescription" name="editDescription" rows="3"></textarea>
        </div>
        <div class="header-actions">
          <button type="button" class="btn-primary" (click)="saveEdit()" [disabled]="!editName.trim()">
            {{ 'common.save' | translate }}
          </button>
          <button type="button" class="btn-secondary" (click)="cancelEdit()">
            {{ 'common.cancel' | translate }}
          </button>
        </div>
      </div>
    }
    <!-- ============ Grille des dossiers racine ============ -->
    @if (!editing) {
      <section class="detail-section nodes-section">
        <div class="section-header">
          <h2>{{ 'loreDetail.folders' | translate }}</h2>
          <button class="btn-add" (click)="navigateToCreateNode()">
            <lucide-icon [img]="Plus" [size]="14"></lucide-icon>
            {{ 'loreDetail.newFolder' | translate }}
          </button>
        </div>
        <!-- rootNodes : uniquement les dossiers racine (pas les sous-dossiers,
        qui sont visibles dans l'arbre de la sidebar). -->
        @if (rootNodes.length > 0) {
          <div class="nodes-grid">
            @for (node of rootNodes; track node) {
              <div class="node-card" (click)="navigateToFolder(node.id!)">
                <lucide-icon [img]="Folder" [size]="24" class="node-icon"></lucide-icon>
                <span class="node-name">{{ node.name }}</span>
              </div>
            }
          </div>
        }
        @if (rootNodes.length === 0) {
          <div class="empty-state">
            <lucide-icon [img]="Folder" [size]="40" class="empty-icon"></lucide-icon>
            <p>{{ 'loreDetail.noFolders' | translate }}</p>
            <button class="btn-add-first" (click)="navigateToCreateNode()">
              <lucide-icon [img]="Plus" [size]="14"></lucide-icon>
              {{ 'loreDetail.createFirstFolder' | translate }}
            </button>
          </div>
        }
      </section>
    }
  </div>
}
