<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">
  <!-- 菜品图片 -->
  <div class="recipe-image-container">
    <img [src]="recipe?.imageUrl" [alt]="recipe?.title" class="recipe-image">
    <div class="image-overlay">
      <ion-chip color="primary">{{ recipe?.category }}</ion-chip>
      <ion-chip color="dark">{{ recipe?.cookTime }}</ion-chip>
    </div>
  </div>

  <!-- 菜品名称 -->
  <div class="recipe-header">
    <h1 class="recipe-title">{{ recipe?.title }}</h1>
    <div class="recipe-meta">
      <span class="meta-item"><ion-icon name="time-outline"></ion-icon> {{ recipe?.prepTime }} 准备</span>
      <span class="meta-item"><ion-icon name="flame-outline"></ion-icon> {{ recipe?.difficulty }}</span>
      <span class="meta-item"><ion-icon name="people-outline"></ion-icon> {{ recipe?.servings }} 人份</span>
    </div>
  </div>

  <!-- 食材部分 -->
  <ion-card class="section-card">
    <ion-card-header>
      <ion-card-title>
        <ion-icon name="basket-outline" slot="start"></ion-icon>
        所需食材
      </ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <ion-list lines="none">
        <ion-item *ngFor="let ingredient of recipe?.ingredients">
          <ion-label>{{ ingredient.name }}</ion-label>
          <ion-note slot="end" color="primary">{{ ingredient.amount }}</ion-note>
        </ion-item>
      </ion-list>
    </ion-card-content>
  </ion-card>

  <!-- 操作步骤 -->
  <ion-card class="section-card">
    <ion-card-header>
      <ion-card-title>
        <ion-icon name="restaurant-outline" slot="start"></ion-icon>
        操作步骤
      </ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <ion-list lines="none">
        <ion-item *ngFor="let step of recipe?.steps; let i = index" class="step-item">
          <ion-avatar slot="start" class="step-number">
            {{ i + 1 }}
          </ion-avatar>
          <ion-label class="ion-text-wrap">
            <p>{{ step }}</p>
          </ion-label>
        </ion-item>
      </ion-list>
    </ion-card-content>
  </ion-card>
</ion-content>