<div class="modal-dimensions">
  <div class="add-form-group">
    @if(!isMonk){
    <h3>Spellslots</h3>
    <mat-slide-toggle
      [checked]="showSpellslots"
      (change)="onSpellslotsSwitchChanged($event)"
      >Zauberplätze in der Übersicht anzeigen</mat-slide-toggle
    >
    <!-- Zauberplätze in der Übersicht anzeigen -->
    <div *ngIf="showSpellslots">
      <div *ngFor="let level of spellslots; let levelIndex = index">
        <div class="level-row">
          Level {{ levelIndex + 1 }}
          <select [(ngModel)]="spellslots[levelIndex].totalSlots">
            <option *ngFor="let number of spellNumbersArray" [value]="number">
              {{ number }}
            </option>
          </select>
          <span>
            <icon
              [icon]="'remove'"
              [size]="'s'"
              [type]="'UI'"
              [class]="'pointer'"
              (click)="removeSpellLevel(levelIndex)"
            ></icon>
          </span>
        </div>
      </div>
      <icon
        [icon]="'add'"
        [size]="'s'"
        [type]="'UI'"
        [class]="'pointer'"
        (click)="addSpellLevel()"
      ></icon>
    </div>
    } @else{

    <h3>KI-Punkte</h3>
    <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>

  <div class="button-wrapper-2-block">
    <ui-button
      [type]="'update'"
      [size]="'xlarge'"
      [color]="'primary'"
      (click)="update()"
    ></ui-button>
    <ui-button
      [type]="'cancel'"
      [size]="'xlarge'"
      [color]="'primary'"
      (click)="cancel()"
    ></ui-button>
  </div>
</div>
