<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/previous-page"></ion-back-button>
    </ion-buttons>
    <ion-title>
      影视
    </ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="search()">
        <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-content> -->

<ion-content>
  <ion-card>
    <ion-card-content>
      <ion-row>
        <ion-col size="3" (click)="fetchMovies()">全部</ion-col>
        <ion-col size="3" (click)="filterByCategory($event, '电影')">电影</ion-col>
        <ion-col size="3" (click)="filterByCategory($event, '电视')">电视</ion-col>
      </ion-row>
    </ion-card-content>
  </ion-card>

  <ion-card>
    <ion-card-content>
      <ion-row>
        <ion-col size="3" (click)="filterByCategory($event, '')">全部</ion-col>
        <ion-col size="3" (click)="filterByCategory($event, '经典')">经典</ion-col>
        <ion-col size="3" (click)="filterByCategory($event, '新片')">新片</ion-col>
      </ion-row>
    </ion-card-content>
  </ion-card>

  <ion-card>
    <ion-card-content>
      <ion-row>
        <ion-col size="3" (click)="filterByCategory($event, '')">全部</ion-col>
        <ion-col size="3" (click)="filterByCategory($event, '中国')">中国</ion-col>
        <ion-col size="3" (click)="filterByCategory($event, '俄罗斯')">俄罗斯</ion-col>
        <ion-col size="3" (click)="filterByCategory($event, '美国')">美国</ion-col>
      </ion-row>
      <ion-row>
        <ion-col size="3" (click)="filterByCategory($event, '巴西')">巴西</ion-col>
        <ion-col size="3" (click)="filterByCategory($event, '英国')">英国</ion-col>
        <ion-col size="3" (click)="filterByCategory($event, '法国')">法国</ion-col>
        <ion-col size="3" (click)="filterByCategory($event, '日本')">日本</ion-col>
      </ion-row>
      <ion-row>
        <ion-col size="3" (click)="filterByCategory($event, '西班牙')">西班牙</ion-col>
        <ion-col size="3" (click)="filterByCategory($event, '韩国')">韩国</ion-col>
      </ion-row>
    </ion-card-content>
  </ion-card>

  <ion-card>
    <ion-card-content>
      <ion-row>
        <ion-col size="3" (click)="filterByCategory($event, '')">全部</ion-col>
        <ion-col size="3" (click)="filterByCategory($event, '爱情')">爱情</ion-col>
        <ion-col size="3" (click)="filterByCategory($event, '喜剧')">喜剧</ion-col>
        <ion-col size="3" (click)="filterByCategory($event, '科幻')">科幻</ion-col>
      </ion-row>
      <ion-row>
        <ion-col size="3" (click)="filterByCategory($event, '动作')">动作</ion-col>
        <ion-col size="3" (click)="filterByCategory($event, '悬疑')">悬疑</ion-col>
        <ion-col size="3" (click)="filterByCategory($event, '犯罪')">犯罪</ion-col>
        <ion-col size="3" (click)="filterByCategory($event, '青春')">青春</ion-col>
      </ion-row>
      <ion-row>
        <ion-col size="3" (click)="filterByCategory($event, '惊悚')">惊悚</ion-col>
        <ion-col size="3" (click)="filterByCategory($event, '文艺')">文艺</ion-col>
      </ion-row>
    </ion-card-content>
  </ion-card>




  <ion-content>
    <!-- <ion-searchbar [(ngModel)]="searchQuery" (ionInput)="fetchPets()"></ion-searchbar>
    <ion-segment [(ngModel)]="selectedType" (ionChange)="fetchPets()"> -->
      <!-- <ion-segment-button *ngFor="let type of petTypes" [value]="type">
        {{ type }}
      </ion-segment-button> -->
    <!-- </ion-segment> -->
    <!-- <ion-button (click)="toggleSort()">Sort by Price</ion-button> -->
    <ion-list>
      <ion-card *ngFor="let movie of filteredMovies">
        <ion-card-header>
          <ion-card-title>{{ movie.get('name') }}</ion-card-title>
        </ion-card-header>
        <ion-card-content>
          <p>类型：{{ movie.get('type') }}</p>
          <p>日期：{{ movie.get('releaseDate')}}</p>
          <p>时长：{{ movie.get('duration') }}</p>
          <p>语言：{{ movie.get('language') }}</p>
          <p>介绍：{{ movie.get('introduction') }}</p>
          <p>评分：{{ movie.get('rating') }}</p>
        </ion-card-content>
        <!-- <ion-button fill="clear" routerLink="/study/pet/{{pet.id}}">详情</ion-button> -->
        <!-- <ion-button *ngIf="pet?.get('user')?.id == user?.id" fill="clear" routerLink="/study/pet/edit/{{pet.id}}">编辑</ion-button> -->
      </ion-card>
    </ion-list>
  </ion-content>
</ion-content>
