<ion-header>
  <ion-toolbar color="success">
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/" text="" color="light"></ion-back-button>
    </ion-buttons>
    <ion-title color="light">搜索结果</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <div *ngIf="searchResults.length === 0" class="empty-state">
    <ion-icon name="search-outline" class="empty-icon"></ion-icon>
    <ion-text color="medium">没有找到相关食谱</ion-text>
  </div>

  <ion-list lines="none">
    <ion-item *ngFor="let item of searchResults" class="compact-item" detail (click)="goToDetail(item.id)">
      <ion-thumbnail slot="start" class="recipe-thumbnail">
        <img [src]="item.get('imageUrl') || 'assets/images/default-food.jpg'" alt="{{item.get('title')}}">
      </ion-thumbnail>
      
      <ion-label class="ion-text-wrap">
        <h3>{{item.get('title') || '未知标题'}}</h3>
        <p class="description">{{item.get('description') || '暂无描述'}}</p>
        
        <div class="meta-info">
          <span class="rating">
            <ion-icon name="star" color="warning"></ion-icon>
            {{item.get('rating') || '0'}}
          </span>
          <span class="time">
            <ion-icon name="time-outline"></ion-icon>
            {{item.get('cookingTime') || '?'}}分钟
          </span>
          <span class="difficulty" *ngIf="item.get('difficulty')">
            <ion-icon name="speedometer-outline"></ion-icon>
            {{item.get('difficulty')}}
          </span>
        </div>
      </ion-label>
    </ion-item>
  </ion-list>
</ion-content>