<!--
  ~ 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>
  <ion-toolbar color="primary" mode="ios">
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>{{ 'library.account.pages.holds.title' | translate | titlecase }}</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-segment [(ngModel)]="activeSegment" (ionChange)="segmentChanged($event)" [value]="'orders'" mode="md">
    <ion-segment-button [value]="'orders'">
      <ion-label>{{ 'library.account.pages.holds.holds' | translate }}</ion-label>
    </ion-segment-button>
    <ion-segment-button [value]="'reservations'">
      <ion-label>{{ 'library.account.pages.holds.reservations' | translate }}</ion-label>
    </ion-segment-button>
  </ion-segment>
  <ion-list *ngIf="paiaDocuments && paiaDocuments.length > 0; else fallback">
    <ng-container [ngSwitch]="activeSegment">
      <ng-container *ngSwitchCase="'orders'">
        <ng-container *ngFor="let hold of paiaDocuments">
          <stapps-paia-item
            *ngIf="toNumber(hold.status) === paiaDocumentStatus.Provided; else ordered"
            [item]="hold"
            [propertiesToShow]="['label', 'storage']"
            (documentAction)="onDocumentAction($event)"
            listName="holds"
          >
          </stapps-paia-item>
          <ng-template #ordered>
            <stapps-paia-item
              [item]="hold"
              [propertiesToShow]="['label']"
              (documentAction)="onDocumentAction($event)"
              listName="holds"
            >
            </stapps-paia-item>
          </ng-template>
        </ng-container>
      </ng-container>
      <ng-container *ngSwitchCase="'reservations'">
        <stapps-paia-item
          *ngFor="let hold of paiaDocuments"
          [item]="hold"
          [propertiesToShow]="['label']"
          (documentAction)="onDocumentAction($event)"
          listName="holds"
        >
        </stapps-paia-item>
      </ng-container>
    </ng-container>
  </ion-list>
  <ng-template #fallback>
    <stapps-skeleton-list-item
      hideThumbnail="true"
      *ngIf="!paiaDocuments; else nothingFound"
    ></stapps-skeleton-list-item>
    <ng-template #nothingFound>
      <ion-label *ngIf="paiaDocuments && paiaDocuments.length === 0" class="centeredMessageContainer">
        {{ 'search.nothing_found' | translate | titlecase }}
      </ion-label>
    </ng-template>
  </ng-template>
</ion-content>
