<div class="page-price-update-list__header bg-background-liste flex flex-col items-end py-4">
  <button
    [disabled]="getSelectableItems().length === 0"
    (click)="print()"
    type="button"
    class="page-price-update-list__print-cta text-lg font-bold text-[#F70400] pr-5 mb-3"
    >
    Drucken
  </button>
  <div class="flex flex-row items-center justify-end">
    @if (getSelectableItems().length > 0) {
      <div class="text-[#0556B4] font-bold text-p3 mr-5">
        @if (selectedItemUids$ | async; as selectedItems) {
          @if (selectedItems?.length > 0) {
            <button class="page-price-update-list__cta-unselect-all" type="button" (click)="unselectAll()">
              Alle entfernen ({{ selectedItems?.length }})
            </button>
          }
          @if (selectedItems?.length === 0) {
            <button class="page-price-update-list__cta-select-all" type="button" (click)="selectAll()">
              Alle auswählen ({{ getSelectableItems().length }})
            </button>
          }
        }
      </div>
    }
    <div class="page-price-update-list__items-count inline-flex flex-row items-center pr-5 text-p3">
      {{ items?.length ?? 0 }}
      Titel
    </div>
  </div>
</div>

<div class="page-price-update-list__order-by h-[53px] flex flex-row items-center justify-center bg-white rounded-t mb-px-2">
  <ui-order-by-filter [orderBy]="orderBy$ | async" (selectedOrderByChange)="search()"></ui-order-by-filter>
</div>

<div class="items scroll-bar">
  @for (item of items; track item.uId; let first = $first) {
    @defer (on viewport) {
    <page-price-update-item [item]="item" [selected]="isSelected(item)" [class.mt-px-10]="!first"></page-price-update-item>
    } @placeholder {
    <page-price-update-item-loader></page-price-update-item-loader>
  }
}

@if (fetching) {
  <page-price-update-item-loader></page-price-update-item-loader>
}
<div class="h-28"></div>
</div>

<!-- <cdk-virtual-scroll-viewport #scrollContainer [itemSize]="267" minBufferPx="1200" maxBufferPx="1200" class="scroll-bar">
<page-price-update-item
  *cdkVirtualFor="let item of items; let first; trackBy: trackByFn"
  [item]="item"
  [selected]="isSelected(item)"
  [class.mt-px-10]="!first"
></page-price-update-item>

<page-price-update-item-loader *ngIf="fetching"> </page-price-update-item-loader>

<div class="h-28"></div>
</cdk-virtual-scroll-viewport> -->

<div class="page-price-update-list__action-wrapper">
  @if (!fetching) {
    <button
      [@cta]
      [disabled]="(selectedItemUids$ | async).length === 0 || (loading$ | async)"
      class="page-price-update-list__complete-items isa-button isa-cta-button isa-button-primary px-11"
      type="button"
      (click)="onComplete()"
      >
      <ui-spinner [show]="loading$ | async">Erledigt</ui-spinner>
    </button>
  }
</div>
