@let i = item();
<ui-item-row
  class="w-full"
  data-what="return-item-row"
  [attr.data-which]="i.product.ean"
>
  <div uiItemRowProdcutImage>
    <img
      sharedProductRouterLink
      sharedProductImage
      [ean]="i.product.ean"
      [imageWidth]="100"
      [imageHeight]="100"
      alt=""
      data-what="product-image"
      [attr.data-which]="i.product.ean"
    />
  </div>
  <div class="text-isa-neutral-900 flex flex-col gap-2" uiItemRowProdcutTitle>
    @if (rewardPoints() !== undefined) {
      <ui-label class="w-10">Prämie</ui-label>
    }
    <h4 class="isa-text-body-2-bold">{{ i.product.contributors }}</h4>
    <h3
      class="isa-text-subtitle-1-regular text-isa-neutral-900"
      data-what="product-name"
      [attr.data-which]="i.product.ean"
    >
      {{ i.product.name }}
    </h3>
    <div class="flex flex-row justify-start items-center gap-2">
      @if (rewardPoints() !== undefined) {
        <span
          class="isa-text-body-2-bold text-isa-secondary-900"
          data-what="product-loyalty-points"
          [attr.data-which]="i.product.ean"
        >
          {{ rewardPoints() | number: '1.0-0' }} Lesepunkte
        </span>
      } @else {
        @if (i.price?.value; as value) {
          <span
            class="isa-text-body-2-bold text-isa-secondary-900"
            data-what="product-price"
            [attr.data-which]="i.product.ean"
          >
            {{ value.value | currency: value.currency }}
          </span>
        }
        @if (i.price?.vat; as vat) {
          <span class="isa-text-body-2-regular text-isa-neutral-600">
            inkl. {{ vat.inPercent }}% MwSt
          </span>
        }
      }
    </div>
  </div>
  <div class="text-isa-neutral-900 flex flex-col gap-2" uiItemRowProdcutInfo>
    <div class="flex flex-row gap-2 items-center justify-start">
      @if (!!i?.product?.format) {
        <ng-icon [name]="i.product.format | lowercase"></ng-icon>
      }
      <span class="isa-text-body-2-bold truncate">
        {{ i?.product?.formatDetail }}
      </span>
    </div>
    <div
      class="text-isa-neutral-600 isa-text-body-2-regular"
      data-what="product-info"
      [attr.data-which]="i?.product?.ean"
    >
      {{ i?.product?.manufacturer }} | {{ i?.product?.ean }}
    </div>
    @if (!!i?.product?.publicationDate) {
      <div class="text-isa-neutral-600 isa-text-body-2-regular">
        {{ i.product.publicationDate | date: 'dd. MMM yyyy' }}
      </div>
    }
  </div>
  <oms-feature-return-details-order-group-item-controls [item]="i">
  </oms-feature-return-details-order-group-item-controls>
</ui-item-row>

@if (!canReturnReceiptItem()) {
  <div
    class="text-isa-accent-red isa-text-body-2-bold flex items-center self-end gap-1 pb-6"
  >
    <ng-icon name="isaActionClose" size="1.5rem"></ng-icon>
    <span>{{ canReturnMessage() }}</span>
  </div>
}

@if (availableQuantity() !== quantity()) {
  <div
    class="flex items-center self-start text-isa-neutral-600 isa-text-body-2-bold pb-6"
  >
    Es wurden bereits {{ quantity() - availableQuantity() }} von
    {{ quantity() }} Artikel zurückgegeben.
  </div>
}
