DNDTools/src/app/journal/journal-spellcards/custom-spells-modal/custom-spells-modal.component.html

<div class="dimensions">
  <div class="content">
    <div class="title">{{ "spellcards.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="horizontal-buttons" style="padding: 2rem 1.5rem">
    <ui-button
      [color]="'red'"
      [width]="'w15'"
      [type]="'deleteSelected'"
      (click)="delete()"
    ></ui-button>
    <ui-button
      [color]="'red'"
      [width]="'w15'"
      [type]="'cancel'"
      (click)="cancel()"
    ></ui-button>
  </div>
</div>