<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>
