<ion-header [translucent]="true">
  <ion-toolbar color="success">
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/" text="返回"></ion-back-button>
    </ion-buttons>
    <ion-title color = "light">我的收藏</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="loadRecipeFavoriteList()">
        <ion-icon slot="icon-only" name="refresh" class="refresh-icon"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="ion-padding">
  <!-- 收藏列表 -->
  <ion-list lines="none" *ngIf="recipeFavoriteList.length > 0">
    <ion-item-sliding *ngFor="let item of recipeFavoriteList">
      <ion-item detail="true" (click)="goToDetail(item.id)" class="favorite-item">
        <ion-thumbnail slot="start" class="item-thumbnail">
          <img [src]="item.get('imageUrl')" [alt]="item.get('title')" class="thumbnail-img">
        </ion-thumbnail>
        <ion-label class="item-content">
          <div class="item-header">
            <h2 class="item-title">{{ item.get('title') }}</h2>
            <div class="rating-container">
              <ion-icon name="star" color="warning"></ion-icon>
              <span>{{ item.get('rating') || '0.0' }}</span>
            </div>
          </div>
          <p class="item-desc">{{ item.get('description') }}</p>
          <div class="item-footer">
            <div class="time-container" *ngIf="item.get('favoriteTime')">
              <ion-icon name="time-outline"></ion-icon>
              <span>{{ item.get('favoriteTime') | date:'yyyy-MM-dd' }}</span>
            </div>
            <ion-badge color="light" *ngIf="item.get('cookingTime')">
              <ion-icon name="timer-outline"></ion-icon>
              {{ item.get('cookingTime') }}
            </ion-badge>
          </div>
        </ion-label>
        <ion-icon name="heart" slot="end" color="danger" class="heart-icon"></ion-icon>
      </ion-item>
      
      <ion-item-options side="end">
        <ion-item-option color="danger" ><!-- (click)="removeCollection(item.id)" -->
          <ion-icon name="trash" size="large"></ion-icon>
          <span>删除</span>
        </ion-item-option>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>

  <!-- 空状态提示 -->
  <div class="empty-state ion-text-center" *ngIf="recipeFavoriteList.length === 0">
    <div class="empty-icon">
      <ion-icon name="heart-outline" color="medium"></ion-icon>
    </div>
    <h3 class="empty-title">暂无收藏记录</h3>
    <p class="empty-text">您收藏的菜品将会显示在这里</p>
    <ion-button fill="outline" color="medium" (click)="loadRecipeFavoriteList()">
      <ion-icon slot="start" name="refresh"></ion-icon>
      刷新
    </ion-button>
  </div>
</ion-content>