<div class="dimensions">
  @if (!isMonk) {
    <div class="title">
      {{ "magic.spellslots" | translate }}
    </div>
    <divider [appearance]="'gold-1'" style="margin-top: 1rem"></divider>
    <div class="content">{{ "magic.description" | translate }}</div>
    <mat-slide-toggle
      class="t-1"
      [checked]="showSpellslots"
      (change)="onSpellslotsSwitchChanged($event)"
    >
      {{ "magic.showSlots" | translate }}
    </mat-slide-toggle>
    <!-- Zauberplätze in der Übersicht anzeigen -->
    @if (showSpellslots) {
      <div class="t-2">
        @for (level of spellslots; let levelIndex = $index; track level) {
          <div class="t-1">
            <mat-form-field appearance="outline">
              <mat-label
                >{{ "general.level" | translate }}
                {{ levelIndex + 1 }}</mat-label
              >
              <mat-select
                [(ngModel)]="spellslots[levelIndex].totalSlots"
                name="class"
              >
                @for (number of [1, 2, 3, 4]; track number) {
                  <mat-option [value]="number">{{ number }}</mat-option>
                }
              </mat-select>
            </mat-form-field>
            <icon-button
              style="display: inline; margin-left: 0.25rem"
              [icon]="'delete'"
              (click)="removeSpellLevel(levelIndex)"
            ></icon-button>
          </div>
        }
      </div>
      @if (spellslots.length < 9) {
        <icon-button
          class="add-level"
          [icon]="'add'"
          (click)="addSpellLevel()"
        ></icon-button>
      }
    }
  } @else {
    <div class="title">{{ "magic.ki" | translate }}</div>
    <divider [appearance]="'gold-1'" style="margin-top: 1rem"></divider>
    <div class="content">{{ "magic.descriptioni" | translate }}</div>
    <mat-slide-toggle
      [checked]="kiPoints.showKiPoints"
      (change)="onKiPointsSwitchChanged($event)"
    >
      {{ "magic.showKi" | translate }}
    </mat-slide-toggle>
    @if (kiPoints.showKiPoints) {
      <div class="t-1">
        {{ "magic.availableKi" | translate }}
        <div class="t-05">
          <mat-form-field appearance="outline">
            <mat-select [(ngModel)]="kiPoints.totalPoints">
              @for (number of kiNumbersArray; track number) {
                <mat-option [value]="number">{{ number }}</mat-option>
              }
            </mat-select>
          </mat-form-field>
        </div>
      </div>
    }
  }

  <div class="horizontal-buttons">
    <ui-button style="width: 45%" (click)="update()"
      >{{ "buttons.confirm" | translate }}
    </ui-button>
    <ui-button style="width: 45%" (click)="cancel()"
      >{{ "buttons.cancel" | translate }}
    </ui-button>
  </div>
</div>
