
<ion-header>
  <!-- <ion-toolbar>
    <ion-title></ion-title>
  </ion-toolbar>
  <ion-searchbar placeholder="诗词歌赋、作者、风格" class="antique-search-bar">
  </ion-searchbar>
  <ion-segment (ionChange)="segmentChanged($event)">
    <ion-segment-button value="categories">
      <ion-label>分类</ion-label>
    </ion-segment-button>
    <ion-segment-button value="works">
      <ion-label>作品</ion-label>
    </ion-segment-button>
  </ion-segment> -->
  <ion-toolbar class="custom-toolbar">
    <!-- <ion-searchbar placeholder="诗词歌赋，作者，姓名" class="custom-searchbar"></ion-searchbar> -->
    <ion-searchbar placeholder="诗词歌赋，作者，姓名" [debounce]="1000" (ionInput)="search($event)" class="custom-searchbar"></ion-searchbar> 
    <ion-list class="list" *ngIf="results.length > 0">
      <ion-item *ngFor="let result of results"(click)="goToDetailPage(result)">
          <ion-label>{{ result?.get("title") }} {{result?.get("author")}}</ion-label>
      </ion-item>
  </ion-list>
  
    <ion-segment [(ngModel)]="selectedSegment" (ionChange)="segmentChanged($event)">  
      <ion-segment-button value="categories" checked>  
        <ion-label>分类</ion-label>  
      </ion-segment-button>  
      <ion-segment-button value="works">  
        <ion-label>作品</ion-label>  
      </ion-segment-button>  
      
    </ion-segment>  
  </ion-toolbar>


</ion-header>

    <ion-content>
      <div [ngSwitch]="selectedSegment">
        <div *ngSwitchCase="'categories'">
          <ion-grid>
            <ion-row>
              <ion-col size="3" *ngFor="let category of categories">
                <ion-card>
                  <ion-card-content>
                    <ion-icon name="book"></ion-icon>
                    <ion-label>{{ category.name }}</ion-label>
                  </ion-card-content>
                </ion-card>
              </ion-col>
            </ion-row>
          </ion-grid>
        </div>
    
        <div *ngSwitchCase="'works'">
          <ion-item>
            <ion-label>朝代</ion-label>
            <ion-select [(ngModel)]="selectedDynasty">
              <ion-select-option *ngFor="let dynasty of dynasties" [value]="dynasty">{{ dynasty }}</ion-select-option>
            </ion-select>
          </ion-item>
          <ion-item>

            <ion-label>作者</ion-label>
            <ion-select [(ngModel)]="selectedAuthor">
              <ion-select-option *ngFor="let author of authors" [value]="author">{{ author }}</ion-select-option>
            </ion-select>
          </ion-item>
          <ion-list>
            <ion-item *ngFor="let poem of filteredPoems">
              <ion-label>
                <h2>{{ poem.title }}</h2>
                <p>{{ poem.dynasty }} / {{ poem.author }}</p>
                <p>{{ poem.firstLine }}</p>
              </ion-label>
            </ion-item>
          </ion-list>
        </div>
      </div>
      <ion-card>
        <img src="assets/icon/仇英 柳下眠琴图轴局部.png" alt="仇英 柳下眠琴图轴局部">
        <ion-card-content>
          <ion-card-subtitle>仇英 柳下眠琴图轴局部</ion-card-subtitle>
          <ion-card-title>君子之学进于道，小人之学进于利。</ion-card-title>
        </ion-card-content>
      </ion-card> 
      <div *ngFor="let poetry of poetries; let i = index; let isLast = last">
        <ion-card>
          <ion-card-header>
            <ion-card-title>
              <strong>{{ poetry.title }}</strong>
            </ion-card-title>
            <ion-card-subtitle>{{ poetry.author }}</ion-card-subtitle>
          </ion-card-header>
          <ion-card-content>
            <p>{{ poetry.content }}</p>
          </ion-card-content>
          <div class="icon-container" >
            <ion-icon name="share-outline"></ion-icon>
            <ion-icon name="bookmark-outline"></ion-icon>
          </div>
        </ion-card>
      </div>                                                                 
    </ion-content>