<div class="dimensions">
  <div class="content">
    <div class="title">{{ "spellbook.manage" | translate }}</div>
    <div class="spell-list">
      @for (spell of spells; let index = $index; track spell) {
        <div
          matRipple
          class="spell"
          [ngClass]="{ selected: indexList.includes(index) }"
          (click)="toggleSpellSelection(index)"
        >
          <div class="spell-name">
            @if (translate.getDefaultLang() == "de") {
              {{ spell.german }}
            } @else {
              {{ spell.english }}
            }
          </div>
          <div class="spell-level">
            {{ "spellbook.favorites.levels." + spell.level | translate }}
          </div>
          <div class="spell-school">
            {{ "schools." + spell.school | translate }}
          </div>
        </div>
      }
    </div>
  </div>
  <div class="button-container">
    <button
      [class]="indexList.length === 0 ? 'disabled' : ''"
      (click)="indexList.length !== 0 ? delete() : ''"
    >
      {{ "spellbook.delete" | translate }}
    </button>
  </div>
</div>
