<hr>
<li class="list-group-item">
  <div class="d-flex pl-1 pb-2 pt-2 position-relative">
    <div class="ms-4 me-auto">
    @if (link && data !== null || total) {
    <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>
    } @else {
      <a [routerLink]="link"
         *ngIf="link; else noLinkTitle">{{title}}
      </a>
    }
    </div>
    <span class="me-4">
      <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>
    </span>
    <span *ngIf="dropdownData && dropdownData.total.total.total > 0"
          class="position-absolute end-0 me-2">
      <a (click)="toggleDropdown()"
         class="dropdown-toggle"
         [attr.aria-expanded]="dropdownToggled"
         aria-controls="row-dropdwon"
         role="button"></a>
    </span>
  </div>
</li>

<div *ngIf="dropdownToggled">
  <hr>
  <ng-container *ngTemplateOutlet="dropdownTemplate"></ng-container>
</div>

<ng-template #defaultSummary>
  @if (data === null) {
  <ng-container *ngTemplateOutlet="loadingTpl"></ng-container>
  } @else {
    <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>
    <cd-icon
       type="success">
    </cd-icon >
  </span>
  <span *ngIf="data.info"
        class="ms-2">
    <span *ngIf="data.info">
      {{ data.info }}
    </span>
    <cd-icon
       type="infoCircle">
    </cd-icon >
  </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>
    <cd-icon
       type="warningAltFilled">
    </cd-icon >
  </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>
    <cd-icon
       type="danger">
    </cd-icon >
  </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>
  @if (data === null) {
  <ng-container *ngTemplateOutlet="loadingTpl"></ng-container>
  } @else {
  <span *ngIf="data.up === data.in">
    {{ data.up }}
    <cd-icon
       type="success">
    </cd-icon >
  </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>
  @if (data === null || total === null) {
  <ng-container *ngTemplateOutlet="loadingTpl"></ng-container>
  } @else {
  <span>
    {{ data.up }}
    <cd-icon
       *ngIf="data.up || data.up === 0"
       type="success">
    </cd-icon >
  </span>
  <span *ngIf="data?.down"
        class="ms-2">
        {{ data.down }}
    <cd-icon
       type="danger">
    </cd-icon >
  </span>

  }
</ng-template>

<ng-template #simplifiedSummary>
  @if (data === 0 || data) {
  <span *ngIf="!dropdownTotalError else showErrorNum">
    {{ data }}
    <cd-icon
       type="success"></cd-icon >
  </span>
  } @else {
    <ng-container *ngTemplateOutlet="loadingTpl"></ng-container>
  }
  <ng-template #showErrorNum>
    <span *ngIf="data - dropdownTotalError  > 0">
      {{ data - dropdownTotalError  }}
    <cd-icon
      type="success"></cd-icon >
    </span>
    <span>
      {{ dropdownTotalError  }}
      <cd-icon
        type="danger"></cd-icon >
    </span>
  </ng-template>
</ng-template>

<ng-template #loadingTpl>
  <cds-inline-loading></cds-inline-loading>
</ng-template>

<ng-template #noLinkTitle>
@if (data !== null || total) {
<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>
} @else {
  <span>{{ title }}</span>
}
</ng-template>

<ng-template #dropdownTemplate>
  <ng-container *ngFor="let data of dropdownData?.total.category | keyvalue">
    <li class="list-group-item">
      <div class="d-flex pb-2 pt-2">
        <div class="ms-5 me-auto">
          <span *ngIf="data.value.total"
                [ngPlural]="data.value.total"
                i18n>
              {{ data.value.total }}
            <ng-template ngPluralCase="=0">{{ hwNames[data.key] }}</ng-template>
            <ng-template ngPluralCase="=1">{{ hwNames[data.key] }}</ng-template>
            <ng-template ngPluralCase="other">{{ hwNames[data.key] | pluralize }}</ng-template>
          </span>
        </div>
        <span [ngClass]="data.value.error ? 'me-2' : 'me-4'">
          {{ data.value.ok }}
          <cd-icon
             *ngIf="data.value.ok"
             type="success">
          </cd-icon >
        </span>
        <span *ngIf="data.value.error"
              class="me-4 ms-2">
              {{ data.value.error }}
          <cd-icon
             type="danger">
          </cd-icon >
        </span>
      </div>
    </li>
  </ng-container>
</ng-template>
