<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>我的借阅</ion-title>
  </ion-toolbar>
</ion-header>
<ion-header>
  <ion-toolbar>
    <ion-segment [(ngModel)]="segment">
      <ion-segment-button value="current">当前借阅</ion-segment-button>
      <ion-segment-button value="history">借阅历史</ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-card *ngIf="segment === 'current'">
    <ion-item lines="full" style="display: flex; justify-content: space-between;">
    <ion-label>
      当前共借阅{{ currentCount }}本书
    </ion-label>
    <div style="display: flex; align-items: center;">
      <ion-icon name="search" style="margin-right: 10px;"></ion-icon>
      <span>检索</span>
    </div>
    <div style="display: flex; align-items: center;">
      <ion-icon name="filter" style="margin-right: 10px;margin-left: 20px;"></ion-icon>
      <span>筛选</span>
    </div>
    </ion-item>
    <ion-card-content>
      <p *ngIf="currentCount === 0">您当前还没有借阅记录哦！</p>
      <ion-card *ngFor="let card of currentBooks">
        <ion-card-content>
          <ion-checkbox slot="start" (ionChange)="selectCard(card)" class="checkbox"></ion-checkbox>
          <ion-card-header>
            {{ card.title }}
          </ion-card-header>
          <ion-card-content>
            {{ card.author }}
          </ion-card-content>
        </ion-card-content>
      </ion-card>

    </ion-card-content>
  </ion-card>
  <ion-footer style="position: fixed; bottom: 0; left: 0; right: 0;">
    <div class="button-container">
      <ion-button *ngIf="segment === 'current'" id="present-alert" style="width: 400px;" expand="full" [disabled]="!isAnyCardSelected()">续借</ion-button>
      <ion-alert
        trigger="present-alert"
        header="请输入续借天数"
        [buttons]="alertButtons"
        [inputs]="alertInputs"
        (ionAlertDidDismiss)="onAlertDismiss($event)">
      </ion-alert>
    </div>
  </ion-footer>
  <ion-card *ngIf="segment === 'history'">
    <ion-item lines="full" style="display: flex; justify-content: space-between;">
      <ion-label>
        共借阅{{ historyCount }}本书
      </ion-label>
      <div style="display: flex; align-items: center;">
        <ion-icon name="search" style="margin-right: 10px;"></ion-icon>
        <span>检索</span>
      </div>
      <div style="display: flex; align-items: center;">
        <ion-icon name="filter" style="margin-right: 10px;margin-left: 20px;"></ion-icon>
        <span>筛选</span>
      </div>
      </ion-item>
    <ion-card-content>
      <p *ngIf="historyCount === 0">您当前还没有历史记录哦！</p>
      <ion-card *ngFor="let history of historyBooks">
        <ion-card-content>
          <!-- <ion-checkbox slot="start" (ionChange)="selectCard(history)" class="checkbox"></ion-checkbox> -->
          <ion-card-header>
            {{ history.title }}
          </ion-card-header>
          <ion-card-content>
            {{ history.author }}
          </ion-card-content>
        </ion-card-content>
      </ion-card>
    </ion-card-content>
  </ion-card>
</ion-content>