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

<div class="add-card">
  @if (state === 1) {
    <div class="clickable-card" (click)="state = 2; closeOthers()">
      <img class="add-icon" src="assets/icons/UIIcons/add.svg" />
    </div>
  } @else if (state === 2) {
    <div class="button-card">
      <button (click)="continueToSpellSelection(false); state = 3">
        Offizieller Zauber
      </button>

      <hr />
      <button (click)="continueToSpellSelection(true); state = 3">
        Offiziellen Zauber bearbeiten
      </button>

      <hr />

      <button (click)="emitNewSpell()">Eigener Zauber</button>
    </div>
  } @else if (state === 3) {
    <div class="spell-selection">
      <input
        type="text"
        class="spell-name"
        [(ngModel)]="newSpellName"
        placeholder="Zauber durchsuchen"
        (keyup)="
          isModification
            ? filterSpellArrayForModification()
            : filterSpellArray()
        "
      />
      <div class="available-spells">
        <ul>
          @for (spell of availableSpells; track spell) {
            <li>
              <button
                (click)="
                  isModification
                    ? emitNewSpellFromOfficial(spell)
                    : spellSelected(spell)
                "
              >
                {{ spell.german }}
              </button>
            </li>
          } @empty {
            Keine Zauber gefunden
          }
        </ul>
      </div>

      <button class="cancel-button" (click)="resetThis()">Abbrechen</button>
    </div>
  }
</div>