@if (node) {
  <div class="page">
    <header class="page-header">
      <div>
        <h1>Éditer le dossier</h1>
        <p class="subtitle">
          {{ childFolderCount }} sous-dossier(s) · {{ pageCount }} page(s)
        </p>
      </div>
      <div class="header-actions">
        <button type="button" class="btn-secondary" (click)="cancel()">Annuler</button>
        <button
          type="submit"
          class="btn-primary"
          [disabled]="form.invalid"
          (click)="save()">
          Sauvegarder
        </button>
      </div>
    </header>
    <form [formGroup]="form" class="edit-form">
      <div class="field">
        <label>Nom du dossier *</label>
        <input type="text" formControlName="name" />
      </div>
      <div class="field">
        <label>Dossier parent <span class="optional">(optionnel)</span></label>
        <select formControlName="parentId">
          <option value="">— Racine du Lore —</option>
          @for (parent of availableParents; track parent) {
            <option [value]="parent.id">{{ parent.name }}</option>
          }
        </select>
        <p class="hint">Vous ne pouvez pas choisir un sous-dossier du dossier courant (cycle interdit)</p>
      </div>
      <div class="field">
        <label>Icône</label>
        <div class="icon-grid">
          @for (option of iconOptions; track option) {
            <button
              type="button"
              class="icon-btn"
              [class.selected]="selectedIcon === option.key"
              (click)="selectIcon(option.key)">
              <lucide-icon [img]="option.icon" [size]="18"></lucide-icon>
            </button>
          }
        </div>
      </div>
    </form>
  </div>
}