<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/"></ion-back-button> <!-- 返回上一级按钮 -->
    </ion-buttons>
    <ion-title>影视</ion-title>
  </ion-toolbar>
 </ion-header>
 
 <ion-content>
  <ion-searchbar [(ngModel)]="searchName" (ionInput)="loadFilms()"></ion-searchbar>
  
  <ion-segment [(ngModel)]="selectedRating" (ionChange)="loadFilms()"></ion-segment>
    
  
  <ion-button (click)="toggleSort()">Sort by Rating</ion-button>
  <ion-list>
    <ion-card *ngFor="let film of films" >
      <ion-card-header >
       
        <ion-img src="{{film.get('image')}}" ></ion-img>
        
        <ion-card>
          <ion-card-header style="display: flex; align-items: left;">
            <div style="display: flex; align-items: center;">
                <ion-card-title>{{ film.get('name') }}</ion-card-title>
                <ion-button style="max-width: 40%; height: 25px; margin-left: 15px;" routerLink="/feiwu/film-detail/{{film.id}}">详情</ion-button>
            </div>
          </ion-card-header>
        </ion-card>
      </ion-card-header>
      <ion-card-content style="display: flex; justify-content: space-between;">
        Author: {{ film.get('details') }}<br>
        Rating: {{ film.get('rating')  }}
      </ion-card-content>
      <div style="display: flex; align-items: center;">
          <div style="flex: 1;"></div> <!-- 这里是为了让下面的元素靠右 -->
          <ion-item>
              <app-edit-ratio-star [value]="score" (onValueChange)="updateFilmRating(film,$event)"></app-edit-ratio-star>
          </ion-item>
      </div>
    </ion-card>
  </ion-list>
 </ion-content>



 <!-- <ion-thumbnail slot="start">
  <ion-img [src]="film.image"></ion-img>
</ion-thumbnail>
<ion-label>
  <h2>{{film.title}}</h2>
  <p>{{film.details}}</p>
  <p>评分: {{film.rating}}</p>
</ion-label> -->