<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>{{ 'data.detail.TITLE' | translate }}</ion-title>
    <ion-buttons slot="primary">
      <stapps-favorite-button
        *ngIf="item"
        [item]="item"
      ></stapps-favorite-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
<ion-content class="ion-no-padding">
  <ion-refresher slot="fixed" (ionRefresh)="refresh($event.target)">
    <ion-refresher-content
      pullingIcon="chevron-down-outline"
      pullingText="{{ 'data.REFRESH_ACTION' | translate }}"
      refreshingText="{{ 'data.REFRESHING' | translate }}"
    >
    </ion-refresher-content>
  </ion-refresher>
  <div [ngSwitch]="true">
    <ng-container *ngSwitchCase="!item && isDisconnected()">
      <div class="notFoundContainer">
        <ion-icon name="no-connection"> </ion-icon>
        <ion-label>
          {{ 'data.detail.COULD_NOT_CONNECT' | translate }}
        </ion-label>
      </div>
    </ng-container>
    <ng-container *ngSwitchCase="item === null">
      <div class="notFoundContainer">
        <ion-icon name="broken-link"> </ion-icon>
        <ion-label>
          {{ 'data.detail.NOT_FOUND' | translate }}
        </ion-label>
      </div>
    </ng-container>
    <ng-container *ngSwitchCase="!item && item !== null">
      <stapps-skeleton-list-item></stapps-skeleton-list-item>
      <stapps-skeleton-simple-card></stapps-skeleton-simple-card>
    </ng-container>
    <ng-container *ngSwitchDefault>
      <stapps-hebis-detail-content [item]="item"></stapps-hebis-detail-content>
      <stapps-daia-availability *ngIf="item"></stapps-daia-availability>
    </ng-container>
  </div>
</ion-content>
