<div class="spellcards-container">
  <div class="content">
    <div class="header-row">
      <h1>{{ "spellcards.prepared" | translate }}</h1>
      <div class="button-container">
        <button class="top-button" (click)="openFavoritesModal()">
          <img src="assets/icons/UIIcons/favorites.svg" />
          {{ "spellcards.favorites" | translate }}
        </button>

        <button class="top-button" (click)="navigateToSpellbook()">
          <img src="assets/icons/UIIcons/book.svg" />
          {{ "spellcards.spellbook" | translate }}
        </button>
      </div>
    </div>

    <divider class="t-075"></divider>
    <div cdkDropListGroup class="t-075">
      @for (
        level of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
        track level;
        let index = $index
      ) {
        <div class="example-container">
          <div
            [class]="showSpellList[index] ? 'level-row' : 'level-row collapsed'"
            (click)="toggleSpellList(index)"
          >
            <div class="level-flex">
              <icon
                [size]="'l'"
                [type]="'UI'"
                [icon]="showSpellList[index] ? 'visible' : 'hidden'"
                [class]="'pointer'"
                class="inline"
              ></icon>
              <div class="heading-2 inline">
                @if (index === 0) {
                  {{ "spellcards.cantrips" | translate }}
                } @else {
                  Level {{ index }}
                }
              </div>
            </div>
          </div>

          <div
            cdkDropList
            cdkDropListOrientation="horizontal"
            [cdkDropListData]="getSpellList(index)"
            class="spell-list"
            (cdkDropListDropped)="drop($event)"
            [class]="showSpellList[index] ? '' : 'hidden'"
          >
            @for (
              spell of getSpellList(index);
              let spellIndex = $index;
              track spell
            ) {
              <spellcard
                cdkDrag
                [id]="spellIndex"
                (cdkDragStarted)="dragStart(index)"
                (cdkDragReleased)="dragEnd($event)"
                [spell]="spell"
                (click)="showFullSpellcard(spell, level, spellIndex)"
              ></spellcard>
            }
            @if (draggingIndex === index) {
              <div class="removal-card" [id]="'deletion' + index">
                {{ "spellcards.delete" | translate }}
              </div>
            } @else {
              <add-card
                [level]="index"
                [alreadyUsedSpells]="getUsedIDs(index)"
                (onSpellSelected)="addSpell($event, index)"
              ></add-card>
            }
          </div>
        </div>
      }
    </div>
  </div>
</div>
