@let product = returnProcess().receiptItem.product;
<oms-shared-return-product-info
  [product]="product"
  data-what="component"
  data-which="return-product-info"
></oms-shared-return-product-info>

@let eligible = eligibleForReturn();
@if (eligible.state !== EligibleForReturnState.NotEligible) {
  <ul data-what="list" data-which="return-infos" class="self-start">
    @for (returnInfo of returnInfos(); track $index) {
      <li
        class="flex items-center gap-1"
        data-what="list-item"
        data-which="return-info"
        [attr.data-return-info]="returnInfo"
        [attr.data-info-index]="$index"
      >
        <ng-icon name="isaActionChevronRight" size="1.5rem"></ng-icon>
        <span class="isa-text-body-2-bold">{{ returnInfo }}</span>
      </li>
    }
  </ul>
} @else {
  <div class="text-isa-accent-red isa-text-body-2-bold flex items-center gap-1">
    <ng-icon name="isaActionClose" size="1.5rem"></ng-icon>
    <span>{{ eligible.reason }}</span>
  </div>
}

<div data-what="container" data-which="edit-button">
  <ui-icon-button
    color="secondary"
    size="large"
    name="isaActionEdit"
    data-what="button"
    data-which="edit-return-item"
    [disabled]="returnItemsAndPrintReciptPending()"
    (click)="location.back()"
  ></ui-icon-button>
</div>
