<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/"></ion-back-button>
    </ion-buttons>
    <ion-title>{{ categoryName }}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-list>
    <ion-item 
      *ngFor="let recipe of recipes" 
      [routerLink]="['/recipe-detail', recipe.id]"
      detail="true">
      <ion-thumbnail slot="start">
        <img [src]="recipe.imageUrl" [alt]="recipe.title">
      </ion-thumbnail>
      <ion-label>
        <h2>{{ recipe.title }}</h2>
        <p *ngIf="recipe.description">{{ recipe.description }}</p>
      </ion-label>
    </ion-item>
  </ion-list>
</ion-content>
