<div class="icl-page">
  <div class="icl-toolbar">
    <button class="btn-back" (click)="back()">
      <lucide-icon [img]="ArrowLeft" [size]="14"></lucide-icon> {{ 'common.back' | translate }}
    </button>
    <span class="spacer"></span>
    <button class="btn-create" (click)="create()">
      <lucide-icon [img]="Plus" [size]="14"></lucide-icon> {{ 'itemCatalogList.newCatalog' | translate }}
    </button>
  </div>

  <header class="icl-header">
    <h1><lucide-icon [img]="Package" [size]="22"></lucide-icon> {{ 'itemCatalogList.title' | translate }}</h1>
    <p class="icl-hint">
      {{ 'itemCatalogList.hint' | translate }}
    </p>
  </header>

  <div class="icl-list">
    @if (catalogs.length === 0) {
      <p class="empty">{{ 'itemCatalogList.empty' | translate }}</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">{{ 'itemCatalogList.itemCount' | translate:{ n: c.items.length } }}</span>
        <span class="icl-del" (click)="remove(c, $event)" [title]="'common.delete' | translate">
          <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
        </span>
      </button>
    }
  </div>
</div>
