DNDTools/src/app/journal/journal-stats/ability-panel/spellslots/spellslots-modal/spellslots-modal.component.html

<div class="dimensions">
  @if (!isMonk) {
    <div class="title">{{ "magic.spellslots" | translate }}</div>
    <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-1">
        @for (level of spellslots; let levelIndex = $index; track level) {
          <div class="t-05">
            {{ "general.level" | translate }} {{ levelIndex + 1 }}
            <select
              [(ngModel)]="spellslots[levelIndex].totalSlots"
              style="padding-left: 0.5rem"
            >
              @for (number of [1, 2, 3, 4]; track number) {
                <option [value]="number">
                  {{ number }}
                </option>
              }
            </select>
            <icon-button
              style="display: inline; margin-left: 0.25rem"
              [icon]="'delete'"
              (click)="removeSpellLevel(levelIndex)"
            ></icon-button>
          </div>
        }
      </div>
      @if (spellslots.length < 9) {
        <icon-button [icon]="'add'" (click)="addSpellLevel()"></icon-button>
      }
    }
  } @else {
    <div class="title">{{ "magic.ki" | translate }}</div>
    <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
      [color]="'green'"
      [type]="'confirm'"
      style="width: 45%"
      (click)="update()"
    >
    </ui-button>
    <ui-button
      [color]="'red'"
      [type]="'cancel'"
      style="width: 45%"
      (click)="cancel()"
    >
    </ui-button>
  </div>
</div>