<div class="content t-05">{{ "life.hitdiceDescription" | translate }}</div>
<p>
  <b>{{ "general.diceType" | translate }}: </b>
  {{ "general.dice" | translate }}{{ hitDice.diceType }}
</p>

<div class="hit-dice-container">
  <div class="input-container">
    @for (_ of getArray(hitDice.diceNumber); track _; let index = $index) {
      <input
        [id]="'checkbox' + index"
        type="checkbox"
        (change)="handleUsedHitDice(index, $event.target)"
      />
    }
  </div>
  <div style="display: flex; flex-direction: column">
    <icon-button [icon]="'add'" (click)="addDice()"></icon-button>
    <icon-button
      [icon]="'remove'"
      [disabled]="hitDice.diceNumber === 1"
      style="margin-top: 1rem"
      (click)="removeDice()"
    ></icon-button>
  </div>
</div>
