<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 class="spell-container">
      <div
        style="
          font-size: 1.5rem;
          padding: 1.25rem 0 0.5rem 1.5rem;
          font-weight: 600;
        "
      >
        Zauberplätze
      </div>
      @for(level of spellslots; let levelIndex = $index; track level){
      <div
        class="level-row"
        [ngClass]="{ used: level.usedSlots == level.totalSlots }"
      >
        <div style="width: 6rem">Level {{ levelIndex + 1 }}:</div>
        <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>

    <div class="value-row">
      <value-box [value]="spellSaveDC" [label]="'Rettungswurf-SG'"></value-box>
      <div>
        <div class="value-box">
          {{ attributeTranslator[spellcastingAttribute] }}
        </div>
        <div class="value-label t-0375">Zauberwirken-Attribut</div>
      </div>
      <value-box
        [value]="spellAttackModifier"
        [label]="'Zauber-Angriffsbonus'"
      ></value-box>
    </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">
    <ui-button [color]="'green'" style="width: 80%" (click)="openModal()">
      Anpassen
    </ui-button>
  </div>
</div>
