<ng-container *transloco="let t; prefix: 'infinite-scroller'">

  @if (showDebugBar()) {
    <div class="fixed-top overlay">
      <strong>Captures Scroll Events:</strong> {{!isScrolling && allImagesLoaded}}
      <strong>Is Scrolling:</strong> {{isScrollingForwards() ? 'Forwards' : 'Backwards'}} {{isScrolling}}
      <strong>All Images Loaded:</strong> {{allImagesLoaded}}
      <strong>Prefetched</strong> {{minPageLoaded}}-{{maxPageLoaded}}
      <strong>Pages:</strong> {{pageNum}} / {{totalPages - 1}}
      <strong>At Top:</strong> {{atTop}}
      <strong>At Bottom:</strong> {{atBottom}}
      <strong>Total Height:</strong> {{getTotalHeight()}}
      <strong>Total Scroll:</strong> {{getTotalScroll()}}
      <strong>Scroll Top:</strong> {{getScrollTop()}}
    </div>
  }

  <app-pull-to-load
    [direction]="'down'"
    [title]="t('continuous-reading-prev-chapter')"
    [scrollContainer]="scrollElement"
    (triggered)="loadPrevChapter.emit()" />

  <div #scroller tabindex="0" [style.outline]="'none'" infinite-scroll [infiniteScrollDistance]="1" [infiniteScrollThrottle]="50">
    @for(item of webtoonImages | async; let index = $index; track item.src) {
      <img src="{{item.src}}" style="display: block;"
           [style.filter]="(darkness$ | async)  ?? '' | safeStyle"
           [style.width]="widthOverride()"
           class="mx-auto {{pageNum === item.page && showDebugOutline() ? 'active': ''}} {{areImagesWiderThanWindow ? 'full-width' : ''}}"
           rel="nofollow"
           alt="image {{item.page}}"
           (load)="onImageLoad($event)"
           (error)="onImageLoadError($event)"
           id="page-{{item.page}}"
           [attr.page]="item.page"
           ondragstart="return false;"
           onselectstart="return false;">
    }
  </div>

  <app-pull-to-load #pullToLoadNext
    [direction]="'up'"
    [title]="t('continuous-reading-next-chapter')"
    [scrollContainer]="scrollElement"
    (triggered)="moveToNextChapter()" />

</ng-container>
