<ion-header>
  <ion-toolbar>
    <ion-title>Book</ion-title>
  </ion-toolbar>
 </ion-header>
 
 <ion-content>
  <ion-searchbar [(ngModel)]="searchQuery" (ionInput)="fetchBooks()"></ion-searchbar>

  <ion-segment [(ngModel)]="selectedType" (ionChange)="fetchBooks()">
    <ion-segment-button *ngFor="let type of bookTypes" [value]="type">
      {{ type }}
    </ion-segment-button>
  </ion-segment>

  <ion-button class="custom-small-button" color="light" (click)="toggleSort()">按借阅时间排序</ion-button>

  <ion-list>
    <ion-card *ngFor="let book of books; let i = index">
      <ion-card-header (click) = "onClick($event, i)">
        <ion-card-title style="font-size: x-small;" >{{ book.get('title') }}</ion-card-title>
      </ion-card-header>
      <ion-card-content (click) = "onClick($event, i)">
        <ion-grid>
          <ion-row>
            <ion-col size="4">
              <ion-thumbnail style="width: 100px; height: 100px; position: relative; left: 0px; top: 0px;">
                <img src= "{{ book.get('src') }}" >
              </ion-thumbnail>
            </ion-col>

            <ion-col size="8">
              <ion-item lines="none">
                <ion-text style="font-size: x-small;">
                  {{ book.get('authors') }} <br>
                  {{ book.get('publisher') }} <br>
                   {{ book.get('publicationDate') }}； {{ book.get('isbn') }}<br>
                  {{ book.get('category') }} <br>
                  借阅次数：{{ book.get('borrow_times') }} <br>
                  借阅比：{{ book.get('borrow_ratio') }}
                </ion-text>
              </ion-item>
            </ion-col>
          </ion-row>
        </ion-grid>
      </ion-card-content>
    </ion-card>
  </ion-list>
 </ion-content>