<!--
  ~ 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.profile.title' | translate | titlecase }}</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-card *ngIf="patron; else loading">
    <ion-card-content>
      <ion-grid>
        <ng-container *ngFor="let property of propertiesToShow">
          <ion-row *ngIf="patron[property]">
            <ion-col> {{ 'library.account.pages.profile.labels' + '.' + property | translate }}: </ion-col>
            <ion-col>
              <ng-container *ngIf="!['expires'].includes(property); else date">
                {{ patron[property] }}
              </ng-container>
              <ng-template #date>
                <ng-container *ngIf="patron[property] === '9999-12-31'; else exactDate">
                  {{ 'library.account.pages.profile.values.unlimited' | translate }}
                </ng-container>
                <ng-template #exactDate>
                  {{ 'library.account.pages.profile.values.expires' | translate }}:&nbsp;{{
                    patron[property] | amDateFormat: 'll'
                  }}
                </ng-template>
              </ng-template>
            </ion-col>
          </ion-row>
        </ng-container>
      </ion-grid>
    </ion-card-content>
  </ion-card>
  <ng-template #loading>
    <stapps-skeleton-simple-card [title]="false" [lines]="4"> </stapps-skeleton-simple-card>
  </ng-template>
</ion-content>
