<!--
  ~ 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-item>
  <ion-label class="ion-text-wrap">
    <ng-container *ngIf="hasEdition">
      <h2 *ngIf="book; else loading" class="name">
        {{ 'library.account.pages.fines.labels.edition' | translate }}: {{ book.name }}
      </h2>
      <ng-template #loading
        ><h2>
          <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text></h2
      ></ng-template>
    </ng-container>
    <ng-container *ngFor="let property of propertiesToShow">
      <p *ngIf="fee[property]">
        {{ 'library.account.pages.fines.labels' + '.' + property | translate }}:
        <ng-container *ngIf="!['date'].includes(property); else date"> {{ fee[property] }} </ng-container>
        <ng-template #date> {{ fee[property] | amDateFormat : 'll' }} </ng-template>
      </p></ng-container
    >
  </ion-label>
</ion-item>
