<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)"
        >
          @if (translate.getDefaultLang() == "de") {
            {{ spell.german }}
          } @else {
            {{ spell.english }}
          }
        </div>
      }
    </div>
  </div>
  <div class="button-container">
    <!-- <ui-button
      [color]="'red'"
      [width]="'w15'"
      [type]="'deleteSelected'"
      (click)="delete()"
    ></ui-button> -->
    <!-- <ui-button
      [color]="'red'"
      [width]="'w15'"
      [type]="'cancel'"
      (click)="cancel()"
    ></ui-button> -->
    <button
      [class]="indexList.length === 0 ? 'disabled' : ''"
      (click)="indexList.length !== 0 ? delete() : ''"
    >
      {{ "spellbook.delete" | translate }}
    </button>
  </div>
</div>
