<ion-header [translucent]="true" class="custom-header">
  <ion-toolbar color="success">
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/" text="" color="light"></ion-back-button>
    </ion-buttons>
    <ion-title class="header-title">
      <ion-icon name="restaurant" class="title-icon"></ion-icon>
      {{ categoryName }}
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="custom-content">
  <!-- 食谱列表 -->
  <ion-list lines="none" class="recipe-list">
    <ion-item 
      *ngFor="let recipe of categorieRecipes" 
      class="recipe-item"
      [routerLink]="['/recipe-detail', recipe.get('objectId')]"
      detail="false"
      (click)="goToDetail(recipe)">
      
      <ion-thumbnail slot="start" class="recipe-thumbnail">
        <img [src]="recipe.get('imageUrl') || 'assets/images/default-food.jpg'" 
             [alt]="recipe.get('title')"
             class="recipe-image">
      </ion-thumbnail>
      
      <ion-label class="recipe-label">
        <h2 class="recipe-title">{{ recipe.get('title') }}</h2>
        <p class="recipe-description" *ngIf="recipe.get('description')">
          {{ recipe.get('description') }}
        </p>
        
        <div class="recipe-meta">
          <span class="meta-item">
            <ion-icon name="time-outline" class="meta-icon"></ion-icon>
            {{ recipe.get('cookingTime') || 30 }}分钟
          </span>
          <span class="meta-item">
            <ion-icon name="star" class="meta-icon" color="warning"></ion-icon>
            {{ recipe.get('rating') || 4.5 }}
          </span>
        </div>
      </ion-label>
      
      <ion-icon slot="end" name="chevron-forward" class="arrow-icon"></ion-icon>
    </ion-item>
  </ion-list>

  <!-- 导入按钮
  <div class="import-button-container">
    <ion-button expand="block" color="medium" (click)="importRecipeList()" class="import-button">
      <ion-icon slot="start" name="cloud-upload-outline"></ion-icon>
      导入食谱列表数据
    </ion-button>
  </div> -->

  <!-- 空状态 -->
  <div class="empty-state" *ngIf="recipeList.length === 0">
    <ion-icon name="fast-food-outline" class="empty-icon"></ion-icon>
    <h3>暂无食谱</h3>
    <p>当前分类下还没有食谱，快来添加第一个吧！</p>
    <ion-button expand="block" color="medium" (click)="importRecipeList()" class="empty-button">
      <ion-icon slot="start" name="cloud-upload-outline"></ion-icon>
      导入食谱
    </ion-button>
  </div>
</ion-content>