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

<div class="add-card">
  @if(state === 1) {
  <div class="clickable-background" (click)="state = 2">
    <img class="add-icon" src="assets/icons/UIIcons/add.svg" />
  </div>
  } @else if(state === 2) {
  <button
    class="add-button"
    (click)="continueToSpellSelection(false); state = 3"
  >
    Offiziellen Zauber auswählen
  </button>
  <button
    class="add-button"
    (click)="continueToSpellSelection(true); state = 3"
  >
    Offiziellen Zauber bearbeiten
  </button>
  <button class="add-button" (click)="emitNewSpell()">
    Neuen Zauber erstellen
  </button>
  } @else if (state === 3) {

  <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)="spellSelected(spell)">
          {{ spell.german }}
        </button>
      </li>
      } @empty { Keine Zauber gefunden }
    </ul>
  </div>
  <button class="abort-button" (click)="resetThis()">Abbrechen</button>
  }

  <!-- @if(isModification == undefined) {
  <img class="add-icon" src="assets/icons/UIIcons/add.svg" />
  <button class="add-button" (click)="continueToSpellSelection(false)">
    Offiziellen Zauber auswählen
  </button>
  <button class="add-button" (click)="continueToSpellSelection(true)">
    Offiziellen Zauber bearbeiten
  </button>
  <button class="add-button" (click)="emitNewSpell()">
    Neuen Zauber erstellen
  </button>
  } @else {

  <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)="spellSelected(spell)">
          {{ spell.german }}
        </button>
      </li>
      } @empty { Keine Zauber gefunden }
    </ul>
  </div>
  <button class="abort-button" (click)="resetThis()">Abbrechen</button>
  } -->
</div>