<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button (click)="dismiss()">
        <ion-icon name="arrow-back"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>{{ categoryName }}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="product-container">
    <ng-container *ngFor="let product of products">
      <ion-card class="product-card" (click)="openDetailModal(product)">
        <ion-card-header class="product-card-header">
          <div class="product-tag">{{ product.get('title') || '药品详情' }}</div>
        </ion-card-header>
        <ion-card-content class="product-card-content">
          <div class="product-image-wrapper">
            <img [src]="product.get('image')" alt="{{product.get('name')}}" class="product-image">
          </div>
          <div class="product-info">
            <h3 class="product-name">{{ product.get('name') }}</h3>
            <div class="product-price">{{ product.get('price') }}</div>
          </div>
        </ion-card-content>
      </ion-card>
    </ng-container>
  </div>
</ion-content>