<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)="loadMusics()"></ion-searchbar>
  
  <ion-button (click)="toggleSort()">Sort by Rating</ion-button>
  <ion-list>
    <ion-card *ngFor="let music of musics" >
      <ion-card-header >
       
        <ion-img src="{{music.get('image')}}" style="width: 100px; height: auto;"></ion-img>
        
        <ion-card>
          <ion-card-header style="display: flex; align-items: left;">
            <div style="display: flex; align-items: center;">
                <ion-card-title>{{ music.get('name') }}</ion-card-title>
                <ion-button style="max-width: 40%; height: 25px; margin-left: 15px;" routerLink="/feiwu/music-detail/{{music.id}}">详情</ion-button>
            </div>
          </ion-card-header>
        </ion-card>
      </ion-card-header>
      <ion-card-content style="display: flex; justify-content: space-between;">
        Author: {{ music.get('author') }}<br>
        Rating: {{ music.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(music,$event)"></app-edit-ratio-star>
          </ion-item>
      </div>
    </ion-card>
  </ion-list>
 </ion-content>

