<div
  class="page-customer-order-search-results__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-small: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-small:w-[23.5rem]"
        [class.desktop-large:w-full]="!(primaryOutletActive$ | async)"
        [hint]="message$ | async"
        [loading]="loading$ | async"
        [inputGroup]="filter?.input | group: 'main'"
        (search)="search({ filter, clear: true })"
        [showDescription]="false"
        [scanner]="true"
      ></shared-filter-input-group-main>
    }

    <a
      class="page-customer-orders-results__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]="filterRoute"
      queryParamsHandling="preserve"
      >
      <shared-icon class="mr-2" icon="filter-variant"></shared-icon>
      Filter
    </a>
  </div>

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

@if (!(listEmpty$ | async)) {
  <ui-scroll-container
    class="page-customer-order-results__scroll-container m-0 p-0"
    [showScrollbar]="false"
    [showScrollArrow]="false"
    (reachEnd)="loadMore()"
    [deltaEnd]="150"
    [itemLength]="itemLength$ | async"
    [containerHeight]="25"
    [showSpacer]="(primaryOutletActive$ | async) || (isTablet$ | async)"
    >
    @if (processId$ | async; as processId) {
      @for (bueryNumberGroup of items$ | async | groupBy: byBuyerNumberFn; track bueryNumberGroup) {
        <div class="page-customer-order-results__items-list w-full">
          @if (bueryNumberGroup.items[0]; as firstItem) {
            <div
              class="page-customer-order-search__item-header-group w-full grid grid-flow-col gap-x-4 items-center justify-between bg-white text-xl rounded-t px-4 py-[0.875rem] font-bold mb-px-2"
              >
              <h3 class="m-0 break-words" [class.w-72]="!(primaryOutletActive$ | async)">
                {{ firstItem?.organisation }}
                @if (!!firstItem?.organisation && (!!firstItem?.firstName || !!firstItem?.lastName)) {
                  -
                }
                {{ firstItem?.lastName }}
                {{ firstItem?.firstName }}
              </h3>
              <h3 class="m-0 break-words text-right" [class.w-40]="!(primaryOutletActive$ | async)">{{ firstItem?.buyerNumber }}</h3>
            </div>
          }
          @for (orderNumberGroup of bueryNumberGroup.items | groupBy: byOrderNumberFn; track orderNumberGroup) {
            @for (processingStatusGroup of orderNumberGroup.items | groupBy: byProcessingStatusFn; track processingStatusGroup) {
              @for (compartmentCodeGroup of processingStatusGroup.items | groupBy: byCompartmentCodeFn; track compartmentCodeGroup) {
                @for (item of compartmentCodeGroup.items; track trackByFn($index, item); let firstItem = $first) {
                  <page-customer-order-item
                    class="page-customer-orders-results__result-item mb-[0.625rem]"
                    [class.page-customer-orders-results__result-item-main]="primaryOutletActive$ | async"
                    [item]="item"
                    [primaryOutletActive]="primaryOutletActive$ | async"
                  ></page-customer-order-item>
                }
              }
            }
          }
        </div>
      }
    }
  </ui-scroll-container>
} @else {
  <div class="empty-message">
    Es sind im Moment keine Bestellposten vorhanden,
    <br />
    die bearbeitet werden können.
  </div>
}


@if (actions$ | async; as actions) {
  <div class="actions z-fixed">
    @for (action of actions; track action) {
      <button
        [disabled]="(loadingFetchedActionButton$ | async) || (loading$ | async)"
        class="cta-action"
        [class.cta-action-primary]="action.selected"
        [class.cta-action-secondary]="!action.selected"
        (click)="handleAction(action)"
        >
        <ui-spinner [show]="(loadingFetchedActionButton$ | async) || (loading$ | async)">{{ action.label }}</ui-spinner>
      </button>
    }
  </div>
}
