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

<ion-content>
  <p *ngIf="name">
    {{ 'library.account.greeting' | translate | titlecase }}
    {{ name | firstLastName }}!
    {{ 'library.account.login.success' | translate }}
  </p>
  <ion-item [routerLink]="['profile']">
    <ion-icon name="person" slot="start"></ion-icon
    >{{ 'library.account.pages.profile.title' | translate | titlecase }}
  </ion-item>
  <ion-item [routerLink]="['holds-and-reservations']">
    <ion-icon name="library" 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="cash-outline" slot="start"></ion-icon
    >{{ 'library.account.pages.fines.title' | translate | titlecase }}
  </ion-item>
</ion-content>
