<!--
~ 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.title' | translate | titlecase }}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  @if (name) {
    <p>
      {{ 'library.account.greeting' | translate }} {{ name | firstLastName }}!
      {{ 'library.account.login.success' | translate }}
    </p>
  } @else {
    <p><ion-skeleton-text animated style="width: 80%"></ion-skeleton-text></p>
  }
  <ion-item [routerLink]="['profile']">
    <ion-icon name="account_circle" slot="start"></ion-icon
    >{{ 'library.account.pages.profile.title' | translate | titlecase }}
  </ion-item>
  <ion-item [routerLink]="['holds']">
    <ion-icon name="collections_bookmark" slot="start"></ion-icon
    >{{ 'library.account.pages.holds.title' | translate | titlecase }}
  </ion-item>
  <ion-item [routerLink]="['checked-out']">
    <ion-icon name="book" slot="start"></ion-icon
    >{{ 'library.account.pages.checked_out.title' | translate | titlecase }}
  </ion-item>
  <ion-item [routerLink]="['fines']">
    <ion-icon name="request_quote" slot="start"></ion-icon
    >{{ 'library.account.pages.fines.title' | translate | titlecase }}
  </ion-item>
</ion-content>
