<div class="sbl-page">
  <div class="sbl-toolbar" appFileDrop [dropDisabled]="importing" (filesDropped)="onMonstersDropped($event)">
    <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-back" (click)="importMonsters()" [disabled]="importing">
      <lucide-icon [img]="Upload" [size]="14"></lucide-icon>
      {{ (importing ? 'enemyList.importing' : 'enemyList.importMonsters') | translate }}
    </button>
    <button class="btn-create" (click)="create()">
      <lucide-icon [img]="Plus" [size]="14"></lucide-icon> {{ 'enemyList.create' | translate }}
    </button>
  </div>

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

  <div class="sbl-list">
    @if (total === 0) {
      <p class="empty">{{ 'enemyList.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.split('/').join(' / ') }}
          <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>
          {{ 'enemyList.unclassified' | translate }}
          <span class="sbl-folder-count">{{ g.items.length }}</span>
        </button>
      }
      @if (!isCollapsed(g.folder)) {
        <div class="sbl-group" cdkDropList [id]="'enemy-group-' + gi"
          [cdkDropListData]="g.items" [cdkDropListConnectedTo]="groupListIds"
          (cdkDropListDropped)="drop(g, $event)">
          @for (e of g.items; track e.id) {
            <button class="sbl-item" cdkDrag [cdkDragData]="e" (click)="open(e)">
              <lucide-icon [img]="Skull" [size]="16"></lucide-icon>
              <span class="sbl-item-name">{{ e.name }}</span>
              @if (e.level) {
                <span class="sbl-item-level">{{ 'enemyList.levelShort' | translate:{ level: e.level } }}</span>
              }
              <span class="sbl-del" (click)="remove(e, $event)" [title]="'common.delete' | translate">
                <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
              </span>
            </button>
          }
        </div>
      }
    }
  </div>
</div>
