<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)="clearHistory()" -->
        <ion-icon slot="icon-only" name="trash-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="ion-padding">
  <!-- 浏览记录列表 -->
  <ion-list lines="none" *ngIf="recipeRecordList.length > 0">
    <ion-item 
      *ngFor="let item of recipeRecordList" 
      (click)="goToDetail(item.id)"
      class="history-item"
      detail="true"
    >
      <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">
        <h2 class="item-title">{{ item.get('title') }}</h2>
        <p class="item-desc">{{ item.get('description')}}</p>
        <div class="item-meta">
          <span class="meta-rating">
            <ion-icon name="star" color="warning"></ion-icon>
            {{ item.get('rating') || '0.0' }}
          </span>
          <!-- <span class="meta-time">
            <ion-icon name="time-outline"></ion-icon>
            {{ item.get('cookingTime') || '未知' }}
          </span> -->
        </div>
      </ion-label>
    </ion-item>
  </ion-list>

  <!-- 空状态提示 -->
  <div class="empty-state ion-text-center" *ngIf="recipeRecordList.length === 0">
    <div class="empty-icon">
      <ion-icon name="time-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>