<div [ngSwitch]="item.type">
  <stapps-book-detail-content
    [item]="item"
    *ngSwitchCase="'book'"
  ></stapps-book-detail-content>
  <stapps-periodical-detail-content
    [item]="item"
    *ngSwitchCase="'periodical'"
  ></stapps-periodical-detail-content>
  <stapps-hebis-article-content
    [item]="item"
    *ngSwitchCase="'article'"
  ></stapps-hebis-article-content>
  <ng-container *ngSwitchDefault>
    <ion-item class="ion-text-wrap" lines="inset">
      <ion-thumbnail slot="start" class="ion-margin-end">
        <ion-icon color="medium" [attr.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>
    <stapps-simple-card
      *ngIf="item.description"
      [title]="'description' | propertyNameTranslate: item | titlecase"
      [content]="'description' | thingTranslate: item"
    ></stapps-simple-card>
  </ng-container>
</div>
