<div
  class="page-pickup-shelf-out-list__header bg-background-liste flex items-end justify-between"
  [class.pb-4]="!(primaryOutletActive$ | async)"
  [class.flex-col]="!(primaryOutletActive$ | async)"
  >
  <div class="flex flex-row w-full desktop:w-min" [class.desktop-large:w-full]="!(primaryOutletActive$ | async)">
    @if (filter$ | async; as filter) {
      <shared-filter-input-group-main
        class="block mr-3 w-full desktop:w-[23.5rem]"
        [class.desktop-large:w-full]="!(primaryOutletActive$ | async)"
        [hint]="searchboxHint$ | async"
        [loading]="fetching$ | async"
        [inputGroup]="filter?.input | group: 'main'"
        (search)="search(filter)"
        [showDescription]="false"
        [scanner]="true"
      ></shared-filter-input-group-main>
    }

    @if (filterPath$ | async; as filterPath) {
      <a
        class="page-pickup-shelf-out-list__filter w-[6.75rem] h-14 rounded font-bold px-5 mb-4 text-lg bg-[#AEB7C1] flex flex-row flex-nowrap items-center justify-center"
        [class.active]="hasFilter$ | async"
        [routerLink]="filterPath.path"
        [queryParams]="filterPath.queryParams"
        queryParamsHandling="preserve"
        >
        <shared-icon class="mr-2" icon="filter-variant"></shared-icon>
        Filter
      </a>
    }
  </div>

  @if (hits$ | async; as hits) {
    <div
      class="page-pickup-shelf-out-list__items-count inline-flex flex-row items-center pr-5 text-p3"
      [class.mb-4]="primaryOutletActive$ | async"
      >
      {{ hits ?? 0 }}
      Titel
    </div>
  }
</div>

<div sharedScrollContainer class="overflow-scroll" (scrolledToBottom)="loadMore()">
  @if (listEmpty$ | async) {
    <div class="empty-message">
      Es sind im Moment keine Bestellposten vorhanden,
      <br />
      die bearbeitet werden können.
    </div>
  }
  @for (bueryNumberGroup of list$ | async | groupBy: byBuyerNumberFn; track trackByGroupFn($index, bueryNumberGroup)) {
    <div
      class="page-pickup-shelf-out-list__items-list w-full mb-[0.625rem]"
      >
      @if (bueryNumberGroup.items[0]; as firstItem) {
        <div
          class="page-pickup-shelf-out-list__item-header-group w-full grid grid-flow-col gap-x-4 items-center justify-between bg-white text-xl rounded-t p-4 font-bold mb-px-2"
          >
          <h3>
            {{ firstItem?.organisation }}
            @if (!!firstItem?.organisation && (!!firstItem?.firstName || !!firstItem?.lastName)) {
              -
            }
            {{ firstItem?.lastName }}
            {{ firstItem?.firstName }}
          </h3>
        </div>
      }
      @for (orderNumberGroup of bueryNumberGroup.items | groupBy: byOrderNumberFn; track trackByGroupFn($index, orderNumberGroup)) {
        @for (processingStatusGroup of orderNumberGroup.items | groupBy: byProcessingStatusFn; track trackByGroupFn($index, processingStatusGroup)) {
          @for (compartmentCodeGroup of processingStatusGroup.items | groupBy: byCompartmentCodeFn; track trackByGroupFn($index, compartmentCodeGroup)) {
            @for (item of compartmentCodeGroup.items; track trackByFn($index, item); let firstItem = $first) {
              <page-pickup-shelf-list-item
                class="page-pickup-shelf-out-list__result-item mb-[0.125rem]"
                [item]="item"
                [primaryOutletActive]="primaryOutletActive$ | async"
                [itemDetailsLink]="getItemDetailsLink(item)"
                [selectedItem]="getSelectedItem$(item) | async"
                [isItemSelectable]="getIsItemSelectable$(item) | async"
              ></page-pickup-shelf-list-item>
            }
          }
        }
      }
    </div>
  }
  @if (fetching$ | async) {
    <page-pickup-shelf-list-item-loader></page-pickup-shelf-list-item-loader>
  }
  @if (actions$ | async; as actions) {
    <div class="actions z-sticky h-0 gap-4">
      @for (action of actions; track action) {
        <button
          [disabled]="(loadingFetchedActionButton$ | async) || (fetching$ | async)"
          class="cta-action"
          [class.cta-action-primary]="action.selected"
          [class.cta-action-secondary]="!action.selected"
          (click)="handleAction(action)"
          matomoClickCategory="pickup-shelf-out-list"
          matomoClickAction="click"
          [matomoClickName]="action.label"
          >
          <ui-spinner [show]="(loadingFetchedActionButton$ | async) || (fetching$ | async)">{{ action.label }}</ui-spinner>
        </button>
      }
    </div>
  }
</div>
