<div class="dimensions">
  @if(!isMonk){
  <div class="title">Zauberplätze</div>
  <div class="content">
    Hier kann die Anzahl der verfügbaren Zauberplätze je Zauberstufe angepasst
    werden
  </div>
  <mat-slide-toggle
    class="t-1"
    [checked]="showSpellslots"
    (change)="onSpellslotsSwitchChanged($event)"
    >Zauberplätze in der Übersicht anzeigen
  </mat-slide-toggle>
  <!-- Zauberplätze in der Übersicht anzeigen -->
  @if(showSpellslots){
  <div class="t-1">
    @for(level of spellslots; let levelIndex = $index; track level){
    <div class="t-05">
      Level {{ levelIndex + 1 }}
      <select
        [(ngModel)]="spellslots[levelIndex].totalSlots"
        style="padding-left: 0.5rem"
      >
        <option *ngFor="let number of spellNumbersArray" [value]="number">
          {{ number }}
        </option>
      </select>
      <icon-button
        style="display: inline; margin-left: 0.25rem"
        [icon]="'delete'"
        (click)="removeSpellLevel(levelIndex)"
      ></icon-button>
    </div>
    }
  </div>
  <icon-button [icon]="'add'" (click)="addSpellLevel()"></icon-button>
  } } @else{

  <div class="title">KI-Punkte</div>
  <mat-slide-toggle
    [checked]="kiPoints.showKiPoints"
    (change)="onKiPointsSwitchChanged($event)"
    >KI Punkte in der Übersicht anzeigen
  </mat-slide-toggle>
  <div *ngIf="kiPoints.showKiPoints">
    Verfügbare KI Punkte
    <div>
      <select [(ngModel)]="kiPoints.totalPoints">
        <option *ngFor="let number of kiNumbersArray" [value]="number">
          {{ number }}
        </option>
      </select>
    </div>
  </div>
  }

  <div class="horizontal-buttons">
    <ui-button [color]="'green'" style="width: 45%" (click)="update()">
      Aktualisieren
    </ui-button>
    <ui-button [color]="'red'" style="width: 45%" (click)="cancel()">
      Abbrechen
    </ui-button>
  </div>
</div>
