<article class="recipe-card" (contextmenu)="handleContextMenu($event)">
  <app-favorite-button
    type="action"
    [isLiked]="isLiked"
    (onClick)="toggleLike()"
  ></app-favorite-button>

  <a [routerLink]="['/app/foods', recipeIdentifier]">
    <header
      class="recipe__image"
      [ngStyle]="{
        'background-image': 'url(' + recipe.pictureUrl + ')'
      }"
    ></header>

    <div class="recipe__content">
      <h1 class="h4 recipe__name">{{ recipe.name }}</h1>
      <p class="p4 recipe__creator">@{{ recipe.creator }}</p>

      <div *ngIf="recipe.tags?.length" class="recipe__tags">
        <app-chip *ngFor="let tag of recipe.tags">#{{ tag.name }}</app-chip>
      </div>
    </div>
  </a>
</article>
