<h4>Trefferwürfel</h4>

<p>
  Trefferwürfel werden verwendet, um bei einer kurzen Rast Trefferpunkte
  wiederherzustellen. Du kannst eine beliebige Anzahl deiner verfügbaren
  Trefferwürfel verwenden. Sie werden bei einer langen rast wiederhergestellt.
</p>
<p><b>Würfelart: </b> W{{ 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>
  <button class="edit-button" (click)="showEditButtons = !showEditButtons">
    <img src="assets/icons/UIIcons/edit.svg" alt="edit" />
  </button>
</div>
@if(showEditButtons){
<button
  class="add-button"
  (click)="hitDice.diceNumber = hitDice.diceNumber + 1"
>
  +
</button>
<button
  class="remove-button"
  [ngClass]="{ disabled: hitDice.diceNumber > 1 }"
  (click)="hitDice.diceNumber = hitDice.diceNumber - 1"
>
  -
</button>
}
