<ui-slider *ngIf="!(fetching$ | async); else fetching" [scrollDistance]="380">
  <div *ngFor="let group of groupedItems$ | async" class="cover">
    <div class="quantity">{{ group.group }}</div>
    <button class="image" (click)="coverClick.emit(group.items)" [title]="group.items[0].processingStatus | processingStatus">
      <img
        [class.faded]="group.items[0].orderItemSubsetId !== selectedOrderItem?.orderItemSubsetId"
        class="thumbnail"
        loading="lazy"
        *ngIf="group.items[0].product?.ean | productImage; let productImage"
        [src]="productImage"
        [alt]="group.items[0].product?.title"
      />
      <span *ngIf="group.items[0] | showCoverCompartmentCode" class="compartment-code">{{ group.items[0] | coverCompartmentCode }}</span>
    </button>
  </div>
</ui-slider>

<ng-template #fetching>
  <ui-spinner [show]="fetching$ | async"> </ui-spinner>
</ng-template>
