<ion-header>
  <ion-toolbar>
    <ion-title>食材查询</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <!-- 搜索框 -->
  <ion-searchbar 
    placeholder="搜索食材" 
    [(ngModel)]="searchQuery" 
    (ionInput)="searchIngredients()">
  </ion-searchbar>

  <!-- 搜索结果 -->
  <ion-list *ngIf="searchResults.length > 0">
    <ion-item *ngFor="let ingredient of searchResults">
      <ion-label>
        <h2>{{ ingredient.name }}</h2>
        <p>{{ ingredient.description }}</p>
      </ion-label>
      <ion-button slot="end" fill="outline" (click)="viewIngredientDetails(ingredient)">
        查看详情
      </ion-button>
    </ion-item>
  </ion-list>

  <!-- 提示信息 -->
  <ion-item *ngIf="searchResults.length === 0 && searchQuery">
    <ion-label>
      <p>未找到与 "{{ searchQuery }}" 相关的食材。</p>
    </ion-label>
  </ion-item>
</ion-content>
