<!--
  ~ Copyright (C) 2023 StApps
  ~ This program is free software: you can redistribute it and/or modify it
  ~ under the terms of the GNU General Public License as published by the Free
  ~ Software Foundation, version 3.
  ~
  ~ This program is distributed in the hope that it will be useful, but WITHOUT
  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
  ~ more details.
  ~
  ~ You should have received a copy of the GNU General Public License along with
  ~ this program. If not, see <https://www.gnu.org/licenses/>.
  -->

<ion-header *ngIf="defaultHeader">
  <ion-toolbar color="primary" mode="ios">
    <ion-buttons slot="start" *ngIf="!isModal">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>{{ 'data.detail.TITLE' | translate }}</ion-title>
    <ion-buttons [slot]="isModal ? 'start' : 'primary'">
      <stapps-favorite-button *ngIf="item" [item]="$any(item)"></stapps-favorite-button>
    </ion-buttons>
    <ion-buttons slot="end" *ngIf="isModal">
      <ion-button fill="clear" (click)="modalController.dismiss()">
        <ion-label>{{ 'modal.DISMISS' | translate }}</ion-label>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
<ng-content select="[header]"></ng-content>
<ion-content parallax class="ion-no-padding">
  <ng-container [ngSwitch]="true">
    <ng-container *ngSwitchCase="!item && (isDisconnected | async)">
      <div class="centeredMessageContainer">
        <ion-icon name="signal_disconnected"></ion-icon>
        <ion-label> {{ 'data.detail.COULD_NOT_CONNECT' | translate }} </ion-label>
      </div>
    </ng-container>
    <ng-container *ngSwitchCase="item === null">
      <div class="centeredMessageContainer">
        <ion-icon name="link_off"></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-data-path [item]="item" [autoRouting]="autoRouteDataPath"></stapps-data-path>
      <stapps-data-detail-content
        [item]="item"
        [contentTemplateRef]="contentTemplateRef"
      ></stapps-data-detail-content>
    </ng-container>
  </ng-container>
</ion-content>
