<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>{{
      'library.account.pages.fines.title' | translate | titlecase
    }}</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-card *ngFor="let fine of fines" class="bold-header">
    <ion-card-header *ngIf="fine.about">{{ fine.about }}</ion-card-header>
    <ion-card-content>
      <ion-grid *ngFor="let property of additionalPropertiesToShow">
        <ion-row *ngIf="fine[property]">
          <ion-col>
            {{
              'library.account.pages.fines.labels' + '.' + property
                | translate
                | titlecase
            }}:</ion-col
          >
          <ion-col width-60 text-right>{{ fine[property] }}</ion-col>
        </ion-row>
      </ion-grid>
    </ion-card-content>
  </ion-card>
  <ion-grid *ngIf="amount">
    <ion-row *ngIf="amount">
      <ion-col>
        {{
          'library.account.pages.fines.labels.amount' | translate | titlecase
        }}:
      </ion-col>
      <ion-col>
        {{ amount }}
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>
