<div class="flex flex-row justify-between">
  <div class="grid grid-cols-[auto,1fr] gap-6">
    <div>
      <img
        sharedProductRouterLink
        sharedProductImage
        [ean]="rewardSelectionItem().item.product.ean"
        [alt]="rewardSelectionItem().item.product.name"
        class="w-14"
        data-what="product-image"
      />
    </div>

    <div class="flex flex-1 flex-col gap-2 max-w-40">
      <div
        class="isa-text-body-2-bold text-ellipsis whitespace-nowrap overflow-hidden"
      >
        {{ rewardSelectionItem().item.product.contributors }}
      </div>
      <div
        class="isa-text-body-2-regular text-ellipsis whitespace-nowrap overflow-hidden"
      >
        {{ rewardSelectionItem().item.product.name }}
      </div>
    </div>
  </div>

  <lib-reward-selection-inputs></lib-reward-selection-inputs>
</div>

@if (showLowStockMessage()) {
  <div
    class="flex flex-row gap-2 items-center text-isa-accent-red isa-text-body-2-bold"
  >
    <ng-icon
      class="w-6 h-6 inline-flex items-center justify-center"
      size="1.5rem"
      name="isaOtherInfo"
    ></ng-icon>
    <span>{{ inStock() }} Exemplare sofort lieferbar</span>
  </div>
}
