<div
  class="flex flex-row justify-end -mb-4 desktop:mb-0 w-[13.4375rem] desktop:w-full"
>
  @if (quantityDropdownValues().length > 1) {
    <ui-dropdown
      class="quantity-dropdown"
      [disabled]="!canReturnReceiptItem()"
      [value]="selectedQuantity()"
      (valueChange)="setQuantity($event)"
    >
      @for (quantity of quantityDropdownValues(); track quantity) {
        <ui-dropdown-option [value]="quantity">{{
          quantity
        }}</ui-dropdown-option>
      }
    </ui-dropdown>
  }

  <ui-dropdown
    label="Produktart"
    class="product-dropdown"
    [disabled]="!canReturnReceiptItem()"
    [value]="productCategory()"
    (valueChange)="setProductCategory($event)"
  >
    @for (kv of availableCategories; track kv.key) {
      <ui-dropdown-option [value]="kv.key">{{ kv.value }}</ui-dropdown-option>
    }
  </ui-dropdown>
</div>

@if (canReturnReceiptItem()) {
  @if (!canReturnResource.isLoading() && selectable()) {
    <ui-checkbox appearance="bullet">
      <input
        type="checkbox"
        [ngModel]="selected()"
        (ngModelChange)="setSelected($event)"
        data-what="return-item-checkbox"
        [attr.data-which]="item().product.ean"
      />
    </ui-checkbox>
  } @else if (canReturnResource.isLoading()) {
    <ui-icon-button
      [pending]="true"
      [color]="'tertiary'"
      data-what="load-spinner"
      data-which="can-return"
    ></ui-icon-button>
  }
}
