<cd-productive-card class="overview-alerts-card">
@if (vm$ | async; as vm) {
  <!-- HEADER -->
  <ng-template #header>
    <h2 class="cds--type-heading-compact-02"
        i18n>
      System alerts
    </h2>
    <button
      cdsButton="ghost"
      size="sm"
      [routerLink]="['/monitoring/active-alerts']"
      i18n
    >
      View all
    </button>
  </ng-template>
  <!-- TOTAL COUNT -->
  @if (vm?.total || vm?.total === 0) {
  <div>
    <span class="cds--type-heading-07">{{ vm.total }}</span>
    <cd-icon [type]="vm.icon"></cd-icon>
  </div>

  <small
    class="cds--type-label-01 overview-alerts-card-need-attention"
    i18n>
    {{ vm.statusText }}
  </small>
  <!-- SUB TOTAL COUNTS -->
  <div class="cds-mt-6">
  @if (vm.badges.length) {
    <div [cdsStack]="compact? 'horizontal' : 'vertical'">
      @for (b of vm.badges; track b.key; let last = $last) {
      <span
        class="overview-alerts-card-badge"
        [class.overview-alerts-card-badge-with-border--right]="!last && compact"
        [class.overview-alerts-card-badge-with-border--bottom]="!compact">
        <a
          cdsLink
          [routerLink]="['/monitoring/active-alerts']"
          [queryParams]="{ severity: b.key }">
          <cd-icon [type]="b.icon"></cd-icon>
          <span class="cds-ml-3">
          @if(compact) {
          {{ b.count }}
          } @else {
           {{b.key | upperFirst}} ({{ b.count }})
          }
          </span>
        </a>
      </span>
      }
    </div>
  }
  </div>
  }@else {
  <cds-skeleton-placeholder></cds-skeleton-placeholder>
  <div class="cds-mt-3">
    <cds-skeleton-text [lines]="1"></cds-skeleton-text>
  </div>
  }
}
</cd-productive-card>
