<ion-header>
  <ion-toolbar color="primary">
    <ion-title>鸟类数据库</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="importData()">
        <ion-icon slot="icon-only" name="cloud-download"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <!-- 鸟类列表 -->
  <ion-list>
    <ion-list-header>
      <ion-label>鸟类名录</ion-label>
    </ion-list-header>

    <ion-item-sliding *ngFor="let bird of birdList">
      <ion-item (click)="goBird(bird)" detail>
        <ion-label>
          <h2>{{bird?.get('commonName')}}</h2>
          <p>{{bird?.get('scientificName')}}</p>
        </ion-label>
      </ion-item>

      <ion-item-options side="end">
        <ion-item-option color="primary" (click)="showTaxonomy(bird)">
          <ion-icon slot="icon-only" name="podium"></ion-icon>
        </ion-item-option>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>

  <!-- 分类学信息 -->
  <ion-card *ngIf="selectedTaxonomy">
    <ion-card-header>
      <ion-card-title>分类信息</ion-card-title>
      <ion-card-subtitle>{{selectedTaxonomy?.get('species')}}</ion-card-subtitle>
    </ion-card-header>

    <ion-card-content>
      <ion-grid>
        <ion-row>
          <ion-col size="6"><strong>界:</strong> {{selectedTaxonomy?.get('kingdom')}}</ion-col>
          <ion-col size="6"><strong>门:</strong> {{selectedTaxonomy?.get('phylum')}}</ion-col>
          <ion-col size="6"><strong>纲:</strong> {{selectedTaxonomy?.get('class')}}</ion-col>
          <ion-col size="6"><strong>目:</strong> {{selectedTaxonomy?.get('order')}}</ion-col>
          <ion-col size="6"><strong>科:</strong> {{selectedTaxonomy?.get('family')}}</ion-col>
          <ion-col size="6"><strong>属:</strong> {{selectedTaxonomy?.get('genus')}}</ion-col>
        </ion-row>
      </ion-grid>
    </ion-card-content>
  </ion-card>

  <!-- 专业知识 -->
  <ion-list>
    <ion-list-header>
      <ion-label>观鸟专业知识</ion-label>
    </ion-list-header>

    <ion-item *ngFor="let exp of expList" detail (click)="showExpertise(exp)">
      <ion-label>
        <h2>{{exp?.get('title')}}</h2>
        <p>{{exp?.get('author')}} • {{exp?.get('experienceLevel')}}</p>
      </ion-label>
      <ion-badge slot="end" *ngIf="exp?.get('isVerified')" color="success">已验证</ion-badge>
    </ion-item>
  </ion-list>
</ion-content>