<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">
        {{ "spellcards.add.official" | translate }}
      </button>

      <hr />
      <button (click)="continueToSpellSelection(true); state = 3">
        {{ "spellcards.add.edit" | translate }}
      </button>

      <hr />

      <button (click)="emitNewSpell()">
        {{ "spellcards.add.custom" | translate }}
      </button>
    </div>
  } @else if (state === 3) {
    <div class="spell-selection">
      <div class="controll-row">
        <div class="toggle-row">
          <span class="toggle-label" [class]="showAll ? 'inactive' : 'active'"
            >Klasse</span
          >
          <mat-slide-toggle
            [hideIcon]="true"
            (change)="toggleShowAll()"
          ></mat-slide-toggle>
          <span class="toggle-label" [class]="showAll ? 'active' : 'inactive'"
            >Alle</span
          >
        </div>
        <icon-button [icon]="'cross'" (click)="resetThis()"></icon-button>
      </div>
      <input
        type="text"
        class="spell-name"
        [(ngModel)]="newSpellName"
        [placeholder]="'spellcards.add.official' | translate"
        (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 {
            {{ "spellcards.add.empty" | translate }}
          }
        </ul>
      </div>

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