<!--
~ 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/>.
-->

@if (defaultHeader) {
  <ion-header>
    <ion-toolbar color="primary" mode="ios">
      @if (!isModal) {
        <ion-buttons slot="start">
          <ion-back-button></ion-back-button>
        </ion-buttons>
      }
      @if (item) {
        <ion-title
          [style.opacity]="(collapse ? '1' : '0') + '!important'"
          [style.translate]="collapse ? '0' : '0 10px'"
          >{{ 'name' | thingTranslate: item }}</ion-title
        >
      }
      <ion-buttons [slot]="isModal ? 'start' : 'primary'">
        @if (item) {
          <stapps-share-button [title]="'name' | thingTranslate: item"></stapps-share-button>
        }
        @if (item) {
          <stapps-favorite-button [item]="$any(item)"></stapps-favorite-button>
        }
      </ion-buttons>
      @if (isModal) {
        <ion-buttons slot="end">
          <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"
  [scrollEvents]="true"
  (ionScroll)="collapse = $any($event).detail.scrollTop > 50"
>
  @switch (true) {
    @case (!item && (isDisconnected | async)) {
      <div class="centered-message-container">
        <ion-icon name="signal_disconnected"></ion-icon>
        <ion-label> {{ 'data.detail.COULD_NOT_CONNECT' | translate }} </ion-label>
      </div>
    }
    @case (item === null) {
      <div class="centered-message-container">
        <ion-icon name="link_off"></ion-icon>
        <ion-label> {{ 'data.detail.NOT_FOUND' | translate }} </ion-label>
      </div>
    }
    @case (!item && item !== null) {
      <stapps-skeleton-list-item></stapps-skeleton-list-item>
      <stapps-skeleton-simple-card></stapps-skeleton-simple-card>
    }
    @default {
      @if (item) {
        <stapps-data-path [item]="item" [autoRouting]="autoRouteDataPath"></stapps-data-path>
        <stapps-data-detail-content
          [item]="item"
          [contentTemplateRef]="contentTemplateRef"
        ></stapps-data-detail-content>
      }
    }
  }
</ion-content>
