@let product = item().product;
@let price = item().retailPrice;
@let tag = item().tag;
@let horizontal = orientation() === 'horizontal';
<div class="flex flex-col gap-2" data-which="product-image-and-remi-label">
  <img
    class="w-full h-auto object-contain"
    sharedProductRouterLink
    sharedProductImage
    [ean]="product.ean"
    [alt]="product.name"
    data-what="product-image"
  />

  @if (tag) {
    <ui-prio-label
      data-what="remission-label"
      [priority]="tag === RemissionItemTags.Prio2 ? 2 : 1"
      >{{ tag }}</ui-prio-label
    >
  }
</div>

<div
  [ngClass]="!horizontal ? innerGridClass() : ''"
  [class.gap-6]="!horizontal"
  [class.grid-flow-row]="horizontal"
  [class.gap-2]="horizontal"
  class="grid"
>
  <div class="grid grid-flow-row gap-2">
    <div class="isa-text-body-2-bold" data-what="product-contributors">
      {{ product.contributors }}
    </div>
    <div class="isa-text-subtitle-1-regular" data-what="product-name">
      {{ product.name }}
    </div>
    <div class="isa-text-body-2-bold" data-what="product-price">
      {{ price?.value?.value | currency: price?.value?.currencySymbol }}
    </div>
  </div>
  <div class="flex flex-col w-full gap-2 items-start justify-end">
    <shared-product-format
      [format]="product.format"
      [formatDetail]="product.formatDetail"
      data-what="product-format"
    ></shared-product-format>
    <div
      class="isa-text-body-2-regular text-isa-neutral-600"
      data-what="product-ean"
    >
      {{ product.ean }}
    </div>
  </div>
</div>
