<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      书籍集合
    </ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="openSearch()">
        <ion-icon name="search"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">书籍</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-segment [(ngModel)]="selectedSegment" (ionChange)="segmentChanged($event)">
    <ion-segment-button value="collection">
      <ion-label>选集</ion-label>
    </ion-segment-button>
    <ion-segment-button value="theme">
      <ion-label>主题</ion-label>
    </ion-segment-button>
    <ion-segment-button value="works">
      <ion-label>作品</ion-label>
    </ion-segment-button>
    <ion-segment-button value="authors">
      <ion-label>作者</ion-label>
    </ion-segment-button>
  </ion-segment>

  <ion-grid>
    <ion-row>
      <ion-col size="6" *ngFor="let book of filteredBooks">
        <ion-card class="book-card">
          <ion-card-header>
            <ion-card-title>{{ book.title }}</ion-card-title>
          </ion-card-header>
          <ion-card-content>
            <p>{{ book.count }} 个条目</p>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>