<!--
~ 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.fines.title' | translate | titlecase }}</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  @if (fines) {
    <ion-list>
      @for (fine of fines; track fine) {
        <stapps-fee-item [fee]="fine"></stapps-fee-item>
      }
    </ion-list>
  } @else {
    @for (_ of [0, 1]; track _) {
      <stapps-skeleton-list-item [hideThumbnail]="true"></stapps-skeleton-list-item>
    }
  }
  <ng-template #loading>
    @for (_ of [0, 1]; track _) {
      <stapps-skeleton-list-item [hideThumbnail]="true"></stapps-skeleton-list-item>
    }
  </ng-template>
  <ion-grid>
    @if (amount) {
      <ion-row class="ion-float-right">
        <ion-col size="auto"> {{ 'library.account.pages.fines.labels.total_amount' | translate }}: </ion-col>
        <ion-col size="auto"> {{ amount }} </ion-col>
      </ion-row>
    } @else {
      <ion-row class="ion-float-right">
        <ion-col size="auto">
          <ion-skeleton-text animated style="width: 100px"></ion-skeleton-text>
        </ion-col>
      </ion-row>
    }
  </ion-grid>
</ion-content>
