<div class="d-flex pl-1 pb-2 pt-2">
  <div class="ms-2 me-auto">
    <a [routerLink]="link"
       *ngIf="link && total > 0; else noLinkTitle"
       [ngPlural]="total"
       i18n>
        {{ total }}
      <ng-template ngPluralCase="=0">{{ title }}</ng-template>
      <ng-template ngPluralCase="=1">{{ title }}</ng-template>
      <ng-template ngPluralCase="other">{{ title }}s</ng-template>
    </a>
  </div>

  <ng-container [ngSwitch]="summaryType">
    <ng-container *ngSwitchCase="'iscsi'">
      <ng-container *ngTemplateOutlet="iscsiSummary"></ng-container>
    </ng-container>
    <ng-container *ngSwitchCase="'osd'">
      <ng-container *ngTemplateOutlet="osdSummary"></ng-container>
    </ng-container>
    <ng-container *ngSwitchCase="'simplified'">
      <ng-container *ngTemplateOutlet="simplifiedSummary"></ng-container>
    </ng-container>
    <ng-container *ngSwitchDefault>
      <ng-container *ngTemplateOutlet="defaultSummary"></ng-container>
    </ng-container>
  </ng-container>
</div>

<ng-template #defaultSummary>
  <span *ngIf="data.success || data.categoryPgAmount?.clean || (data.success === 0 && data.total === 0)">
    <span *ngIf="data.success || (data.success === 0 && data.total === 0)">
      {{ data.success }}
    </span>
    <span *ngIf="data.categoryPgAmount?.clean">
      {{ data.categoryPgAmount?.clean }}
    </span>
    <i class="text-success"
       [ngClass]="[icons.success]">
    </i>
  </span>
  <span *ngIf="data.info"
        class="ms-2">
    <span *ngIf="data.info">
      {{ data.info }}
    </span>
    <i class="text-info"
       [ngClass]="[icons.danger]">
    </i>
  </span>
  <span *ngIf="data.warn || data.categoryPgAmount?.warning"
        class="ms-2">
    <span *ngIf="data.warn">
      {{ data.warn }}
    </span>
    <span *ngIf="data.categoryPgAmount?.warning">
      {{ data.categoryPgAmount?.warning }}
    </span>
    <i class="text-warning"
       [ngClass]="[icons.warning]">
    </i>
  </span>
  <span *ngIf="data.error || data.categoryPgAmount?.unknown"
        class="ms-2">
    <span *ngIf="data.error">
      {{ data.error }}
    </span>
    <span *ngIf="data.categoryPgAmount?.unknown">
      {{ data.categoryPgAmount?.unknown }}
    </span>
    <i class="text-danger"
       [ngClass]="[icons.danger]">
    </i>
  </span>
  <span *ngIf="data.categoryPgAmount?.working"
        class="ms-2">
    <span *ngIf="data.categoryPgAmount?.working">
      {{ data.categoryPgAmount?.working }}
    </span>
    <i class="text-warning"
       [ngClass]="[icons.spinner, icons.spin]">
    </i>
  </span>
</ng-template>

<ng-template #osdSummary>
  <span *ngIf="data.up === data.in">
    {{ data.up }}
    <i class="text-success"
       [ngClass]="[icons.success]">
    </i>
  </span>
  <span *ngIf="data.up !== data.in">
    {{ data.up }}
    <span class="fw-bold text-success">
        up
    </span>
  </span>
  <span *ngIf="data.in !== data.up"
        class="ms-2">
    {{ data.in }}
    <span class="fw-bold text-success">
        in
    </span>
  </span>
  <span *ngIf="data.down"
        class="ms-2">
    {{ data.down }}
    <span class="fw-bold text-danger me-2">
        down
    </span>
  </span>
  <span *ngIf="data.out"
        class="ms-2">
    {{ data.out }}
    <span class="fw-bold text-danger me-2">
        out
    </span>
  </span>
  <span *ngIf="data.nearfull"
        class="ms-2">
        {{ data.nearfull }}
    <span class="fw-bold text-warning me-2">
      nearfull</span></span>
  <span *ngIf="data.full"
        class="ms-2">
        {{ data.full }}
    <span class="fw-bold text-danger">
      full
    </span>
  </span>
</ng-template>

<ng-template #iscsiSummary>
  <span>
    {{ data.up }}
    <i class="text-success"
       *ngIf="data.up || data.up === 0"
       [ngClass]="[icons.success]">
    </i>
  </span>
  <span *ngIf="data.down"
        class="ms-2">
        {{ data.down }}
    <i class="text-danger"
       [ngClass]="[icons.danger]">
    </i>
  </span>
</ng-template>

<ng-template #simplifiedSummary>
  <span>
    {{ data }}
    <i class="text-success"
       [ngClass]="[icons.success]"></i>
  </span>
</ng-template>

<ng-template #noLinkTitle>
  <span *ngIf="total || total === 0"
        [ngPlural]="total">
    {{ total }}
    <ng-template ngPluralCase="=0">{{ title }}</ng-template>
    <ng-template ngPluralCase="=1">{{ title }}</ng-template>
    <ng-template ngPluralCase="other">{{ title }}s</ng-template>
  </span>
</ng-template>
