<div class="nbl-page">
  <div class="nbl-toolbar">
    <button class="btn-back" (click)="back()">
      <lucide-icon [img]="ArrowLeft" [size]="14"></lucide-icon> Retour
    </button>
  </div>

  <header class="nbl-header">
    <h1><lucide-icon [img]="BookOpen" [size]="22"></lucide-icon> Ateliers d'adaptation</h1>
    <p class="nbl-hint">
      Discute avec l'IA à partir d'un PDF source (recherche dans le document) pour adapter
      son contenu à ta campagne. La source et la conversation sont conservées.
    </p>
  </header>

  <div class="nbl-create">
    <input type="text" [(ngModel)]="newName" placeholder="Nom de l'atelier (ex: Adaptation du module X)"
      (keyup.enter)="create()">
    <button class="btn-create" (click)="create()" [disabled]="creating">
      <lucide-icon [img]="Plus" [size]="14"></lucide-icon>
      {{ creating ? 'Création…' : 'Nouvel atelier' }}
    </button>
  </div>

  <div class="nbl-list">
    @if (notebooks.length === 0) {
      <p class="empty">Aucun atelier pour l'instant.</p>
    }
    @for (nb of notebooks; track nb) {
      <button class="nbl-item" (click)="open(nb)">
        <lucide-icon [img]="BookOpen" [size]="16"></lucide-icon>
        <span class="nbl-item-name">{{ nb.name }}</span>
        <span class="nbl-del" (click)="remove(nb, $event)" title="Supprimer">
          <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
        </span>
      </button>
    }
  </div>
</div>
