<div class="slots-container" style="position: relative">
  <div *ngIf="kiPoints.showKiPoints" class="ki-container">
    KI-Punkte
    <ng-container
      *ngFor="let _ of getArray(kiPoints.totalPoints); let kiIndex = index"
    >
      <input
        [id]="'checkbox' + kiIndex"
        type="checkbox"
        (change)="handleUsedKiPoints(kiIndex, $event.target)"
      />
    </ng-container>
    <div class="ki-add-buttons"></div>
  </div>

  <div *ngIf="showSpellslots" class="spellslot-sontainer">
    <div class="level-row" *ngFor="let _ of spellslots; let levelIndex = index">
      Level {{ levelIndex + 1 }}
      <ng-container
        *ngFor="
          let _ of getArray(spellslots[levelIndex].totalSlots);
          let slotIndex = index
        "
      >
        <input
          [id]="'checkbox' + levelIndex + '-' + slotIndex"
          type="checkbox"
          (change)="handleUsedSlots(levelIndex, slotIndex, $event.target)"
        />
      </ng-container>
    </div>
    <div style="display: flex; justify-content: space-around; margin-top: 2rem">
      <div>
        <div class="value-box">{{ spellSaveDC }}</div>
        <div class="value-label">Rettungswurf-SG</div>
      </div>
      <div>
        <div class="value-box">{{ spellAttackModifier }}</div>
        <div class="value-label">Zauber-Angriffsbonus</div>
      </div>
    </div>
  </div>
  @if(!kiPoints.showKiPoints && !showSpellslots){
  <div
    style="
      text-align: center;
      margin-top: 2rem;
      font-size: 1.25rem;
      font-weight: 500;
    "
  >
    Weder KI-Punkte noch Zauberplätze hinzugefügt
  </div>
  }
</div>
