<!--
~ 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>
  @if (paiaDocuments && paiaDocuments.length > 0) {
    <ion-list>
      @switch (activeSegment) {
        @case ('orders') {
          @for (hold of paiaDocuments; track hold) {
            <stapps-paia-item
              [item]="hold"
              [propertiesToShow]="['label', 'storage']"
              (documentAction)="onDocumentAction($event)"
              listName="holds"
            >
            </stapps-paia-item>
          }
        }
        @case ('reservations') {
          @for (hold of paiaDocuments; track hold) {
            <stapps-paia-item
              [item]="hold"
              [propertiesToShow]="['label', 'starttime', 'storage', 'queue']"
              (documentAction)="onDocumentAction($event)"
              listName="holds"
            >
            </stapps-paia-item>
          }
        }
      }
    </ion-list>
  } @else {
    @if (!paiaDocuments) {
      <stapps-skeleton-list-item [hideThumbnail]="true"></stapps-skeleton-list-item>
    } @else {
      @if (paiaDocuments && paiaDocuments.length === 0) {
        <ion-label class="centered-message-container">
          {{ 'search.nothing_found' | translate | titlecase }}
        </ion-label>
      }
    }
  }
</ion-content>
