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

