<header class="top-bar">
  <div class="top-bar__character">
    <img class="top-bar__portrait" src="/images/hud/runtime/CharacterIcon-128.png" alt="" />
    @if (character(); as character) {
      <div class="top-bar__identity">
        <span class="top-bar__name">{{ character.name }}</span>
        <span class="top-bar__level">Stufe {{ character.level }}</span>
      </div>
      <div class="top-bar__health" aria-label="Lebenspunkte">
        <span>{{ character.currentHp }} / {{ character.maxHp }}</span>
        <span class="top-bar__health-track" aria-hidden="true">
          <span
            class="top-bar__health-value"
            [style.inline-size.%]="(character.currentHp / character.maxHp) * 100"
          ></span>
        </span>
      </div>
    } @else {
      <span class="top-bar__loading">Charakterdaten werden geladen</span>
    }
  </div>

  <div class="top-bar__ornament" aria-hidden="true"></div>
  <span class="top-bar__world-name">Ashen Realms</span>
</header>
