<div class="title">{{ "life.hitpoints" | translate }}</div>

<div class="value-row t-2 b-15">
  <value-box
    [isInput]="true"
    [(ngModel)]="currentHitPoints"
    [label]="'life.current'"
    (change)="checkValidity()"
  ></value-box>
  <value-box
    [isInput]="true"
    [(ngModel)]="maxHitPoints"
    [label]="'life.max'"
    (change)="checkValidity()"
  ></value-box>
  <value-box
    [isInput]="true"
    [(ngModel)]="temporaryHitPoints"
    [label]="'life.temporary'"
  ></value-box>
</div>

<div class="tab-row">
  <button
    class="tab-button"
    (click)="active = 1"
    [class]="active === 1 ? 'active' : ''"
  >
    {{ "life.hitdice" | translate }}
  </button>
  <button
    class="tab-button"
    (click)="active = 2"
    [class]="active === 2 ? 'active' : ''"
  >
    {{ "life.deathSave" | translate }}
  </button>
</div>

<div class="life-data-container">
  @switch (active) {
    @case (1) {
      <hit-dice style="margin-top: 5rem"></hit-dice>
    }
    @case (2) {
      <death-save></death-save>
    }
  }
</div>
