<div class="life-box">
  <div class="life-box-name">Trefferpunkte</div>
  <div class="life-box-bar">
    <div
      class="life-box-bar-current"
      [style.width.%]="currentHitPointsPercentage"
    ></div>
    <div
      class="life-box-bar-temporary"
      [style.width.%]="temporaryHitPointsPercentage"
    ></div>
    <div
      class="life-box-bar-missing"
      [style.width.%]="missingHitPointsPercentage"
    ></div>
    <div class="life-box-bar-label">
      {{ currentHitPoints }}/{{ maxHitPoints
      }}{{ temporaryHitPoints > 0 ? " (+" + temporaryHitPoints + ")" : "" }}
    </div>
  </div>
  <div class="life-box-buttons">
    <button (click)="addHitPoints()">Heilung +</button>
    <button (click)="removeHitPoints()">Schaden -</button>
    <button (click)="addTemporaryHitPoints()">Temporäre Trefferpunkte +</button>
  </div>
</div>
