<!-- meal-search.component.html -->
<ion-header>
  <ion-toolbar>
    <ion-title>搜索结果</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="closeModal()">关闭</ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <!-- 搜索结果展示区域 -->
  <div *ngIf="meals.length > 0">
    <ion-card *ngFor="let meal of meals">
      <img [src]="meal.strMealThumb" alt="{{ meal.strMeal }}" />
      <ion-card-header>
        <ion-card-title>{{ meal.strMeal }}</ion-card-title>
        <ion-card-subtitle>{{ meal.strCategory }} - {{ meal.strArea }}</ion-card-subtitle>
      </ion-card-header>
      <ion-card-content>
        <p>{{ meal.strInstructions}}...</p>
      </ion-card-content>
    </ion-card>
  </div>

  <!-- 如果没有结果，则显示提示 -->
  <div *ngIf="meals.length === 0">
    <p>没有找到相关菜谱</p>
  </div>
</ion-content>
