<div class="icl-page">
  <div class="icl-toolbar">
    <button class="btn-back" (click)="back()">
      <lucide-icon [img]="ArrowLeft" [size]="14"></lucide-icon> Retour
    </button>
    <span class="spacer"></span>
    <button class="btn-create" (click)="create()">
      <lucide-icon [img]="Plus" [size]="14"></lucide-icon> Nouveau catalogue
    </button>
  </div>

  <header class="icl-header">
    <h1><lucide-icon [img]="Package" [size]="22"></lucide-icon> Catalogues d'objets</h1>
    <p class="icl-hint">
      Boutiques, butins, trésors… à remplir à la main ou via l'IA. Consultables en session
      quand les joueurs visitent une échoppe.
    </p>
  </header>

  <div class="icl-list">
    @if (catalogs.length === 0) {
      <p class="empty">Aucun catalogue pour l'instant.</p>
    }
    @for (c of catalogs; track c) {
      <button class="icl-item" (click)="open(c)">
        <lucide-icon [img]="Package" [size]="16"></lucide-icon>
        <span class="icl-item-name">{{ c.name }}</span>
        <span class="icl-item-count">{{ c.items.length }} objet(s)</span>
        <span class="icl-del" (click)="remove(c, $event)" title="Supprimer">
          <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
        </span>
      </button>
    }
  </div>
</div>
