<!--
~ Copyright (C) 2022 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.checked_out.title' | translate | titlecase }}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  @if (checkedOutItems) {
    @for (checkedOutItem of checkedOutItems; track checkedOutItem) {
      <stapps-paia-item
        [item]="checkedOutItem"
        [propertiesToShow]="['label', 'renewals', 'duedate']"
        (documentAction)="onDocumentAction($event)"
        listName="checked_out"
      >
      </stapps-paia-item>
    } @empty {
      <ion-label class="centered-message-container">
        {{ 'search.nothing_found' | translate | titlecase }}
      </ion-label>
    }
  } @else {
    <stapps-skeleton-list-item [hideThumbnail]="true"></stapps-skeleton-list-item>
  }
</ion-content>
