<div class="sbl-page">
  <div class="sbl-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> {{ 'npcList.create' | translate }}
    </button>
  </div>

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

  <div class="sbl-list">
    @if (total === 0) {
      <p class="empty">{{ 'npcList.empty' | translate }}</p>
    }
    @for (g of groups; track g.folder; let gi = $index) {
      @if (g.folder) {
        <button type="button" class="sbl-folder" (click)="toggleFolder(g.folder)">
          <lucide-icon class="sbl-folder-chevron" [img]="isCollapsed(g.folder) ? ChevronRight : ChevronDown" [size]="14"></lucide-icon>
          <lucide-icon [img]="Folder" [size]="14"></lucide-icon>
          {{ g.folder }}
          <span class="sbl-folder-count">{{ g.items.length }}</span>
        </button>
      } @else if (groups.length > 1) {
        <button type="button" class="sbl-folder sbl-folder--none" (click)="toggleFolder(g.folder)">
          <lucide-icon class="sbl-folder-chevron" [img]="isCollapsed(g.folder) ? ChevronRight : ChevronDown" [size]="14"></lucide-icon>
          {{ 'npcList.unclassified' | translate }}
          <span class="sbl-folder-count">{{ g.items.length }}</span>
        </button>
      }
      @if (!isCollapsed(g.folder)) {
        <div class="sbl-group" cdkDropList [id]="'npc-group-' + gi"
          [cdkDropListData]="g.items" [cdkDropListConnectedTo]="groupListIds"
          (cdkDropListDropped)="drop(g, $event)">
          @for (n of g.items; track n.id) {
            <button class="sbl-item" cdkDrag [cdkDragData]="n" (click)="open(n)">
              <lucide-icon [img]="Drama" [size]="16"></lucide-icon>
              <span class="sbl-item-name">{{ n.name }}</span>
              <span class="sbl-del" (click)="remove(n, $event)" [title]="'common.delete' | translate">
                <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
              </span>
            </button>
          }
        </div>
      }
    }
  </div>
</div>
