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

<div class="slots-box">
  <div class="slots-container">
    @if (kiPoints.showKiPoints) {
      <div class="points-container">
        <div
          style="
            font-size: 1.5rem;
            padding: 1.25rem 0 0.5rem 1.5rem;
            font-weight: 600;
          "
        >
          {{ "magic.ki" | translate }}
        </div>
        <div
          class="level-row"
          [ngClass]="{ used: kiPoints.usedPoints == kiPoints.totalPoints }"
        >
          <div class="checkboxes">
            @for (
              _ of getArray(kiPoints.totalPoints);
              track _;
              let kiIndex = $index
            ) {
              <input
                [id]="'checkbox' + kiIndex"
                type="checkbox"
                (change)="handleUsedKiPoints(kiIndex, $event.target)"
              />
            }
          </div>
        </div>
        <div class="ki-add-buttons"></div>
      </div>
    }

    @if (showSpellslots) {
      <div class="points-container">
        <div
          style="
            font-size: 1.5rem;
            padding: 1.25rem 0 0.5rem 1.5rem;
            font-weight: 600;
          "
        >
          {{ "magic.spellslots" | translate }}
        </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>
      @if (spellcastingAttribute) {
        <div class="value-row">
          <value-box [value]="spellSaveDC" [label]="'magic.saveAC'"></value-box>
          <div>
            <div class="value-box">
              {{ "attributes." + spellcastingAttribute | translate }}
            </div>
            <div class="value-label t-0375">
              {{ "magic.spellcastingAttribute" | translate }}
            </div>
          </div>
          <value-box
            [value]="spellAttackModifier"
            [label]="'magic.spellAttackBonus'"
          ></value-box>
        </div>
      }
    }
    @if (!kiPoints.showKiPoints && !showSpellslots) {
      <div class="empty-list">
        @if (isMonk) {
          {{ "magic.emptyKi" | translate }}
        } @else {
          {{ "magic.emptySpell" | translate }}
        }
      </div>
    }
  </div>
  <!-- MODAL BUTTON -->

  <div class="footer">
    <ui-button style="width: 60%" (click)="openModal()"
      >{{ "buttons.modify" | translate }}
    </ui-button>
  </div>
</div>