<div class="dashboard-metric">
  <span class="dashboard-metric__label">{{ labelKey() | translate }}</span>
  @if (loading()) {
    <app-skeleton shape="text" width="70%" height="1.1em" />
  } @else {
    <span
      class="dashboard-metric__value"
      [class.dashboard-metric__value--badge-production]="badge() === 'production'"
      [class.dashboard-metric__value--badge-development]="badge() === 'development'"
    >
      {{ value() ?? '—' }}
      @if (badgeLabelKey(); as badgeKey) {
        <span class="dashboard-metric__badge">{{ badgeKey | translate }}</span>
      }
    </span>
  }
</div>
