@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="Visualiser le graphe des pages et de leurs liens (PNJ inclus)">
            <lucide-icon [img]="Network" [size]="14"></lucide-icon>
            Graphe
          </button>
          <button type="button" class="btn-secondary" (click)="startEdit()" title="Modifier le Lore">
            <lucide-icon [img]="Pencil" [size]="14"></lucide-icon>
            Modifier
          </button>
          <button type="button" class="btn-danger" (click)="deleteLore()" title="Supprimer le Lore">
            <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
            Supprimer
          </button>
        </div>
      </div>
    }
    <!-- ============ Header : mode édition inline ============ -->
    @if (editing) {
      <div class="detail-header edit-mode">
        <div class="field">
          <label for="lore-detail-edit-name">Nom</label>
          <input id="lore-detail-edit-name" type="text" [(ngModel)]="editName" name="editName" required />
        </div>
        <div class="field">
          <label for="lore-detail-edit-description">Description</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()">
            Sauvegarder
          </button>
          <button type="button" class="btn-secondary" (click)="cancelEdit()">
            Annuler
          </button>
        </div>
      </div>
    }
    <!-- ============ Grille des dossiers racine ============ -->
    @if (!editing) {
      <section class="detail-section nodes-section">
        <div class="section-header">
          <h2>Dossiers</h2>
          <button class="btn-add" (click)="navigateToCreateNode()">
            <lucide-icon [img]="Plus" [size]="14"></lucide-icon>
            Nouveau dossier
          </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>Aucun dossier pour le moment.</p>
            <button class="btn-add-first" (click)="navigateToCreateNode()">
              <lucide-icon [img]="Plus" [size]="14"></lucide-icon>
              Créer votre premier dossier
            </button>
          </div>
        }
      </section>
    }
  </div>
}