<!--
~ 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 (showModalHeader) {
  <ion-header 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>
}
@if (!showModalHeader) {
  <stapps-title-card [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 class="content-switch">
    @switch (item.type) {
      @case ('article') {
        <stapps-article-detail-content [item]="$any(item)"></stapps-article-detail-content>
      }
      @case ('catalog') {
        <stapps-catalog-detail-content [item]="$any(item)"></stapps-catalog-detail-content>
      }
      @case ('date series') {
        <stapps-date-series-detail-content [item]="$any(item)"></stapps-date-series-detail-content>
      }
      @case ('dish') {
        <stapps-dish-detail-content [item]="$any(item)"></stapps-dish-detail-content>
      }
      @case ('academic event') {
        <stapps-event-detail-content [item]="$any(item)"></stapps-event-detail-content>
      }
      @case ('sport course') {
        <stapps-event-detail-content [item]="$any(item)"></stapps-event-detail-content>
      }
      @case ('favorite') {
        <stapps-favorite-detail-content [item]="$any(item)"></stapps-favorite-detail-content>
      }
      @case ('message') {
        <stapps-message-detail-content [item]="$any(item)"></stapps-message-detail-content>
      }
      @case ('job posting') {
        <stapps-job-posting-detail-content [item]="$any(item)"></stapps-job-posting-detail-content>
      }
      @case ('person') {
        <stapps-person-detail-content [item]="$any(item)"></stapps-person-detail-content>
      }
      @case ('building') {
        <stapps-place-detail-content [item]="$any(item)"></stapps-place-detail-content>
      }
      @case ('floor') {
        <stapps-place-detail-content [item]="$any(item)"></stapps-place-detail-content>
      }
      @case ('point of interest') {
        <stapps-place-detail-content [item]="$any(item)"></stapps-place-detail-content>
      }
      @case ('room') {
        <stapps-place-detail-content
          [item]="$any(item)"
          [openAsModal]="openAsModal"
        ></stapps-place-detail-content>
      }
      @case ('semester') {
        <stapps-semester-detail-content [item]="$any(item)"></stapps-semester-detail-content>
      }
      @case ('video') {
        <stapps-video-detail-content [item]="$any(item)"></stapps-video-detail-content>
      }
      @default {
        <ion-item class="ion-text-wrap" lines="inset">
          <ion-thumbnail slot="start" class="ion-margin-end">
            <ion-icon [name]="item.type | dataIcon"></ion-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>
        @if (item.description) {
          <stapps-simple-card
            [title]="$any('description' | propertyNameTranslate: item) | titlecase"
            [content]="'description' | thingTranslate: item"
          ></stapps-simple-card>
        }
      }
    }
  </div>
</ng-template>
