DNDTools/src/app/journal/journal-spellcards/journal-spellcards.component.html

<div class="spellcards-container">
  <button class="manage-spells" (click)="openManageCustomSpellsModal()">
    <img src="assets/icons/UIIcons/settings.svg" /> Eigene Zauber verwalten
  </button>

  <div cdkDropListGroup>
    <!-- TODO: revert array to 0-9 -->
    @for(level of [0,1,2,3]; 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">{{ getSpellLevel(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">
          Hier zum Löschen ablegen
        </div>
        } @else {
        <add-card
          [level]="index"
          [alreadyUsedSpells]="getUsedIDs(index)"
          (createNewSpell)="openSpellCreationModal(index, false)"
          (createNewSpellFromOfficial)="
            openSpellCreationModal(index, true, $event)
          "
          (onSpellSelected)="addSpellToSpelllist($event, index)"
        ></add-card>
        }
      </div>
    </div>

    }
  </div>
</div>