<div class="slots-box">
  <div class="slots-container">
    <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>

    @if(showSpellslots){
    <!-- <div *ngIf="showSpellslots" class="spellslot-list"> -->
    @for(level of spellslots; let levelIndex = $index; track level){
    <div class="level-row">
      Level {{ levelIndex + 1 }}:
      <div class="checkboxes">
        @for ( checkbox of getArray(spellslots[levelIndex].totalSlots); let
        slotIndex = $index; track checkbox){
        <input
          [id]="'checkbox' + levelIndex + '-' + slotIndex"
          type="checkbox"
          (change)="handleUsedSlots(levelIndex, slotIndex, $event.target)"
        />
        }
      </div>
    </div>
    }

    <div class="modifier-container">
      <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 class="empty-list">
      Noch keine {{ isMonk ? "Ki-Punkte" : "Zauberplätze" }} hinzugefügt
    </div>
    }
  </div>
  <!-- MODAL BUTTON -->
  <div class="footer">
    <button (click)="openModal()">Anpassen</button>
  </div>
</div>
