<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-buttons slot="end">
      <ion-button class="search-button">
        <ion-icon name="search" slot="icon-only"></ion-icon>
      </ion-button>
    </ion-buttons>

    <ion-segment [(ngModel)]="selectedGenre" (ionChange)="onGenreSelect($event.detail.value)">
      <ion-segment-button value="五言律诗">
        <ion-label>五言律诗</ion-label>
      </ion-segment-button>
      <ion-segment-button value="七言律诗">
        <ion-label>七言律诗</ion-label>
      </ion-segment-button>
      <ion-segment-button value="五言绝句">
        <ion-label>五言绝句</ion-label>
      </ion-segment-button>
      <ion-segment-button value="七言绝句">
        <ion-label>七言绝句</ion-label>
      </ion-segment-button>
      <ion-segment-button value="五言古诗">
        <ion-label>五言古诗</ion-label>
      </ion-segment-button>
      <ion-segment-button value="七言古诗">
        <ion-label>七言古诗</ion-label>
      </ion-segment-button>
      <ion-segment-button value="乐府">
        <ion-label>乐府</ion-label>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ng-container>
    <ion-grid>
      <ion-col size="2" class="fixed-sidebar">
        <ion-list>
          <ion-item button (click)="onGenreSelect('五言律诗')">
            <ion-label>五言律诗</ion-label>
          </ion-item>
          <ion-item button (click)="onGenreSelect('七言律诗')">
            <ion-label>七言律诗</ion-label>
          </ion-item>
          <ion-item button (click)="onGenreSelect('五言绝句')">
            <ion-label>五言绝句</ion-label>
          </ion-item>
          <ion-item button (click)="onGenreSelect('七言绝句')">
            <ion-label>七言绝句</ion-label>
          </ion-item>
          <ion-item button (click)="onGenreSelect('五言古诗')">
            <ion-label>五言古诗</ion-label>
          </ion-item>
          <ion-item button (click)="onGenreSelect('七言古诗')">
            <ion-label>七言古诗</ion-label>
          </ion-item>
          <ion-item button (click)="onGenreSelect('乐府')">
            <ion-label>乐府</ion-label>
          </ion-item>
        </ion-list>
      </ion-col>
      <ion-col size="10" class="scrollable-content">
        <div class="book-cards-container">
          <ion-card class="bookcard" *ngFor="let book of filteredPoemsList"  (click)="goToPoemDetail(book)">
            <ion-card-header>
              <ion-card-title>{{ book.get('title') }}</ion-card-title>
            </ion-card-header>
            <ion-card-content>
              <p>{{ book.get('creation_time') }}</p>
            </ion-card-content>
          </ion-card>
        </div>
      </ion-col>
    </ion-grid>
  </ng-container>
</ion-content>
