<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/"></ion-back-button>
    </ion-buttons>
    <ion-title>我的收藏</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <!-- 收藏列表 -->
  <ion-list>
    <ion-item-sliding *ngFor="let item of collections">
      <ion-item [routerLink]="['/recipe-detail', item.id]">
        <ion-thumbnail slot="start">
          <img [src]="item.image" [alt]="item.name">
        </ion-thumbnail>
        <ion-label>
          <h2>{{ item.name }}</h2>
          <p *ngIf="item.time">收藏时间: {{ item.time | date:'yyyy-MM-dd' }}</p>
        </ion-label>
        <ion-icon name="heart" slot="end" color="danger"></ion-icon>
      </ion-item>
      <ion-item-options side="end">
        <ion-item-option color="danger" (click)="removeCollection(item.id)">
          <ion-icon name="trash" slot="icon-only"></ion-icon>
        </ion-item-option>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>

  <!-- 空状态提示 -->
  <div class="empty-state" *ngIf="collections.length === 0">
    <ion-icon name="heart-outline"></ion-icon>
    <h3>暂无收藏记录</h3>
    <p>您收藏的菜品将会显示在这里</p>
  </div>
</ion-content>
