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

<div class="journal-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></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>