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

<div class="add-card">
  @if (isIdle) {
    <div class="clickable-card" (click)="isIdle = false; closeOthers()">
      <img class="add-icon" src="assets/icons/UIIcons/add.svg" />
    </div>
  } @else {
    <div class="spell-selection">
      <div class="controll-row">
        <div class="toggle-row">
          <span
            class="toggle-label"
            [class]="showAll ? 'inactive' : 'active'"
            >{{ "spellcards.add.class" | translate }}</span
          >
          <mat-slide-toggle
            [hideIcon]="true"
            (change)="toggleShowAll()"
          ></mat-slide-toggle>
          <span
            class="toggle-label"
            [class]="showAll ? 'active' : 'inactive'"
            >{{ "spellcards.add.all" | translate }}</span
          >
        </div>
        <icon-button [icon]="'cross'" (click)="resetThis()"></icon-button>
      </div>
      <input
        type="text"
        class="spell-name"
        [(ngModel)]="newSpellName"
        [placeholder]="'spellcards.add.search' | translate"
        (keyup)="filterSpellArray()"
      />
      <div class="available-spells">
        <ul>
          @for (spell of availableSpells; track spell) {
            <li>
              <button (click)="spellSelected(spell)">
                @if (translate.getDefaultLang() == "de") {
                  {{ spell.german }}
                } @else {
                  {{ spell.english }}
                }
              </button>
            </li>
          } @empty {
            {{ "spellcards.add.empty" | translate }}
          }
        </ul>
      </div>
    </div>
  }
</div>