<!--
  ~ 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="showModalHeader" translucent>
  <ion-toolbar color="primary" mode="ios">
    <ion-title>{{ 'name' | thingTranslate : item }}</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="modalController.dismiss()">{{ 'app.ui.CLOSE' | translate }}</ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<stapps-title-card *ngIf="!showModalHeader" [item]="item"> </stapps-title-card>
<ng-container *ngTemplateOutlet="contentTemplateRef || defaultContent; context: {$implicit: item}">
</ng-container>
<stapps-origin-detail [origin]="item.origin"></stapps-origin-detail>

<ng-template #defaultContent>
  <div [ngSwitch]="item.type" class="content-switch">
    <stapps-article-detail-content
      [item]="$any(item)"
      *ngSwitchCase="'article'"
    ></stapps-article-detail-content>
    <stapps-catalog-detail-content
      [item]="$any(item)"
      *ngSwitchCase="'catalog'"
    ></stapps-catalog-detail-content>
    <stapps-date-series-detail-content
      [item]="$any(item)"
      *ngSwitchCase="'date series'"
    ></stapps-date-series-detail-content>
    <stapps-dish-detail-content [item]="$any(item)" *ngSwitchCase="'dish'"></stapps-dish-detail-content>
    <stapps-event-detail-content
      [item]="$any(item)"
      *ngSwitchCase="'academic event'"
    ></stapps-event-detail-content>
    <stapps-event-detail-content
      [item]="$any(item)"
      *ngSwitchCase="'sport course'"
    ></stapps-event-detail-content>
    <stapps-favorite-detail-content
      [item]="$any(item)"
      *ngSwitchCase="'favorite'"
    ></stapps-favorite-detail-content>
    <stapps-message-detail-content
      [item]="$any(item)"
      *ngSwitchCase="'message'"
    ></stapps-message-detail-content>
    <stapps-person-detail-content [item]="$any(item)" *ngSwitchCase="'person'"></stapps-person-detail-content>
    <stapps-place-detail-content [item]="$any(item)" *ngSwitchCase="'building'"></stapps-place-detail-content>
    <stapps-place-detail-content [item]="$any(item)" *ngSwitchCase="'floor'"></stapps-place-detail-content>
    <stapps-place-detail-content
      [item]="$any(item)"
      *ngSwitchCase="'point of interest'"
    ></stapps-place-detail-content>
    <stapps-place-detail-content
      [item]="$any(item)"
      [openAsModal]="openAsModal"
      *ngSwitchCase="'room'"
    ></stapps-place-detail-content>
    <stapps-semester-detail-content
      [item]="$any(item)"
      *ngSwitchCase="'semester'"
    ></stapps-semester-detail-content>
    <stapps-video-detail-content [item]="$any(item)" *ngSwitchCase="'video'"></stapps-video-detail-content>
    <ng-container *ngSwitchDefault>
      <ion-item class="ion-text-wrap" lines="inset">
        <ion-thumbnail slot="start" class="ion-margin-end">
          <stapps-icon>{{ item.type | dataIcon }}</stapps-icon>
        </ion-thumbnail>
        <ion-grid>
          <ion-row>
            <ion-col>
              <div class="ion-text-wrap">
                <h2 class="name">{{ item.name }}</h2>
                <ion-note>{{ item.type }}</ion-note>
              </div>
            </ion-col>
          </ion-row>
        </ion-grid>
      </ion-item>
      <stapps-simple-card
        *ngIf="item.description"
        [title]="$any('description' | propertyNameTranslate : item) | titlecase"
        [content]="'description' | thingTranslate : item"
      ></stapps-simple-card>
    </ng-container>
  </div>
</ng-template>
