<ion-header [translucent]="true">
  <ion-toolbar color="primary">
    <ion-title class="left">首页</ion-title>
    <ion-buttons slot="end">
      <ion-button fill="clear">
        <ion-icon slot="icon-only" name="search"></ion-icon>
      </ion-button>
      <ion-button fill="clear">
        <ion-icon slot="icon-only" name="notifications"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="ion-padding">

  <!-- 合并饮食计划和打卡进度为一个卡片 -->
  <ion-card class="custom-card">
    <ion-card-header>
      <ion-card-title class="ion-text-center">饮食计划与打卡进度</ion-card-title>
    </ion-card-header>
    <ion-card-content>

      <!-- 饮食计划部分 -->
      <div class="meal-plan">
        <ion-list lines="full">
          <ion-item *ngFor="let meal of mealPlan">
            <ion-img [src]="meal.imageUrl" slot="start" class="meal-image"></ion-img>
            <ion-icon slot="start" [name]="meal.icon" class="ion-icon-size"></ion-icon>
            <ion-label>{{ meal.meal }}：{{ meal.food }}</ion-label>
            <ion-note slot="end" class="calories-text">{{ meal.calories }} kcal</ion-note> <!-- 显示卡路里 -->
          </ion-item>
        </ion-list>
      </div>

      <!-- 打卡进度部分 -->
      <div class="progress-section">
        <ion-label class="progress-text">{{ progressText }}</ion-label>
      </div>

    </ion-card-content>
  </ion-card>

  <!-- 食谱推荐部分 -->
  <ion-card class="custom-card">
    <ion-card-header>
      <ion-card-title class="ion-text-center">今日食谱推荐</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <ion-list lines="full">
        <ion-item *ngFor="let recipe of recipeRecommendations">
          <ion-img [src]="recipe.imageUrl" slot="start" class="meal-image"></ion-img>
          <ion-label>{{ recipe.title }}</ion-label>
          <ion-note slot="end" class="small-text">{{ recipe.description }}</ion-note>
          <ion-note slot="end" class="calories-text">{{ recipe.calories }} kcal</ion-note> <!-- 显示卡路里 -->
        </ion-item>
      </ion-list>
    </ion-card-content>
  </ion-card>

  <ion-card class="custom-card">
    <ion-card-header>
    </ion-card-header>
    <ion-card-content>
      <ion-button expand="full" color="secondary" routerLink="/ai-food-analysis" class="custom-button">
        食材查询
      </ion-button>
    </ion-card-content>
  </ion-card>

</ion-content>
