DNDTools/src/app/journal/journal-stats/life-container/hit-dice/hit-dice.component.html

<div class="heading-line">
  <div class="heading left t-0">{{ "life.hitdice" | translate }}</div>
  <icon-button
    [icon]="showEditButtons ? 'cross' : 'edit'"
    (click)="showEditButtons = !showEditButtons"
  ></icon-button>
</div>
<div class="content">{{ "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>
  @if (showEditButtons) {
    <div style="display: flex; flex-direction: column">
      <icon-button
        [icon]="'add'"
        (click)="hitDice.diceNumber = hitDice.diceNumber + 1"
      ></icon-button>
      <icon-button
        [icon]="'remove'"
        style="margin-top: 1rem"
        (click)="hitDice.diceNumber = hitDice.diceNumber - 1"
      ></icon-button>
    </div>
  }
</div>