<ng-container *transloco="let t; prefix: 'manga-reader'">
  <div class="reader" #reader [ngStyle]="{overflow: (isFullscreen ? 'auto' : 'visible')}">
    @if(debugMode) {
      <div class="fixed-top overlay">
        @for(img of cachedImages; track img.src) {
          @if (this.readerService.imageUrlToPageNum(img.src); as imageNum) {
            <span class="me-1" [ngClass]="{'current': imageNum === this.pageNum, 'loaded': img.complete}">{{this.readerService.imageUrlToPageNum(img.src)}}</span>
          }
        }
      </div>
    }
    @if (menuOpen) {
      <div class="fixed-top overlay" animate.enter="slide-in-top" animate.leave="slide-out-top">
        <div style="display: flex; margin-top: 0.3125rem;">
          <button class="btn btn-icon" style="height: 100%" [title]="t('back')" (click)="closeReader()">
            <i class="fa fa-arrow-left" aria-hidden="true"></i>
            <span class="visually-hidden">{{t('back')}}</span>
          </button>

          <div>
            <div style="font-weight: bold;">{{title}}
              @if (incognitoMode) {
                <span class="clickable" (click)="turnOffIncognito()" role="button" [attr.aria-label]="t('incognito-alt')">(<i class="fa fa-glasses"  aria-hidden="true"></i><span class="visually-hidden">{{t('incognito-title')}}</span>)</span>
              }
            </div>
            <div class="subtitle">
              {{chapterTitleLabel()}}
              @if (totalSeriesPages > 0) {
                <span class="ms-2">{{t('series-progress', {percentage: (Math.min(1, ((totalSeriesPagesRead + pageNum) / totalSeriesPages)) | percent)}) }}</span>
              }
            </div>
          </div>

          <div style="margin-left: auto; padding-right: 3%;">
            <button class="btn btn-icon" [ngbTooltip]="t('shortcuts-menu-alt')" (click)="openShortcutModal()">
              <i class="fa-solid fa-clipboard-question" aria-hidden="true"></i>
              <span class="visually-hidden">{{t('shortcuts-menu-alt')}}</span>
            </button>
            @if (!bookmarkMode() && hasBookmarkRights()) {
              <button class="btn btn-icon" role="checkbox" [attr.aria-checked]="CurrentPageBookmarked"
                      title="{{t(CurrentPageBookmarked ? 'unbookmark-page-tooltip' : 'bookmark-page-tooltip')}}" (click)="bookmarkPage()">
                <i class="{{CurrentPageBookmarked ? 'fa' : 'far'}} fa-bookmark" aria-hidden="true"></i>
                <span class="visually-hidden">{{t(CurrentPageBookmarked ? 'unbookmark-page-tooltip' : 'bookmark-page-tooltip')}}</span>
              </button>
            }
          </div>
        </div>
      </div>
    }


    <app-loading [loading]="isLoading || (!(currentImage$ | async)?.complete && this.readerMode !== ReaderMode.Webtoon)" [absolute]="true" />
    <div class="reading-area"
         ngSwipe (swipeEnd)="onSwipeEnd($event)" (swipeMove)="onSwipeMove($event)"
         [ngStyle]="{'background-color': backgroundColor, 'height': readerMode === ReaderMode.Webtoon ? 'inherit' : '100dvh'}" #readingArea>
      @if (readerMode !== ReaderMode.Webtoon) {
        <div appDblClick (dblclick)="bookmarkPage($event)" (singleClick)="toggleMenu()">
          <app-canvas-renderer [readerSettings$]="readerSettings$"
            [image$]="currentImage$"
            [bookmark$]="showBookmarkEffect$"
            [showClickOverlay$]="showClickOverlay$" />
        </div>

        <!-- Pagination controls and screen hints-->
        <div class="pagination-area">
          <div class="{{readerMode === ReaderMode.LeftRight ? 'left' : 'top'}} {{clickOverlayClass('left')}}" (click)="handlePageChange($event, KeyDirection.Left)"
               [ngStyle]="{'height': (readerMode === ReaderMode.LeftRight ? MaxHeight: '25%'), 'max-height': MaxHeight}">
            @if (showClickOverlay) {
              <div>
                <i class="fa fa-angle-{{readingDirection === ReadingDirection.RightToLeft ? 'double-' : ''}}{{readerMode === ReaderMode.LeftRight ? 'left' : 'up'}}"
                   [title]="t('prev-page-tooltip')" aria-hidden="true"></i>
              </div>
            }
          </div>
          <div class="{{readerMode === ReaderMode.LeftRight ? 'right' : 'bottom'}} {{clickOverlayClass('right')}}" (click)="handlePageChange($event, KeyDirection.Right)"
               [ngStyle]="{'height': (readerMode === ReaderMode.LeftRight ? MaxHeight: '25%'),
                                'left': 'inherit',
                                'right': RightPaginationOffset + 'px',
                                'max-height': MaxHeight}">
            @if (showClickOverlay) {
              <div>
                <i class="fa fa-angle-{{readingDirection === ReadingDirection.LeftToRight ? 'double-' : ''}}{{readerMode === ReaderMode.LeftRight ? 'right' : 'down'}}"
                   [title]="t('next-page-tooltip')" aria-hidden="true"></i>
              </div>
            }
          </div>
        </div>

        <div appDblClick (doubleClick)="bookmarkPage($event)" (singleClick)="toggleMenu()">
          <app-single-renderer [image$]="currentImage$"
                               [readerSettings$]="readerSettings$"
                               [bookmark$]="showBookmarkEffect$"
                               [pageNum$]="pageNum$"
                               [showClickOverlay$]="showClickOverlay$"
                               [readingProfile]="readingProfile" />

          <app-double-renderer [image$]="currentImage$"
                               [readerSettings$]="readerSettings$"
                               [bookmark$]="showBookmarkEffect$"
                               [showClickOverlay$]="showClickOverlay$"
                               [pageNum$]="pageNum$"
                               [getPage]="getPageFn" />

          <app-double-reverse-renderer [image$]="currentImage$"
                                       [readerSettings$]="readerSettings$"
                                       [bookmark$]="showBookmarkEffect$"
                                       [showClickOverlay$]="showClickOverlay$"
                                       [pageNum$]="pageNum$"
                                       [getPage]="getPageFn" />

          <app-double-no-cover-renderer [image$]="currentImage$"
                                        [readerSettings$]="readerSettings$"
                                        [bookmark$]="showBookmarkEffect$"
                                        [showClickOverlay$]="showClickOverlay$"
                                        [pageNum$]="pageNum$"
                                        [getPage]="getPageFn" />
        </div>
      } @else {
        @if (!isLoading && !inSetup) {
          <div class="webtoon-images" appDblClick (doubleClick)="bookmarkPage($event)" (singleClick)="toggleMenu()">
            <app-infinite-scroller [pageNum]="pageNum"
                                   [bufferPages]="5"
                                   [goToPage]="goToPageEvent"
                                   (pageNumberChange)="handleWebtoonPageChange($event)"
                                   [totalPages]="maxPages"
                                   [urlProvider]="getPageUrl"
                                   (loadNextChapter)="loadNextChapter(true)"
                                   (loadPrevChapter)="loadPrevChapter()"
                                   [bookmarkPage]="showBookmarkEffectEvent"
                                   [fullscreenToggled]="fullscreenEvent"
                                   [readerSettings$]="readerSettings$"
                                   [readingProfile]="readingProfile"
                                   [chapterId]="chapterId"/>
          </div>
        }
      }
    </div>

    @if (menuOpen) {
      <div class="fixed-bottom overlay"  animate.enter="slide-in-bottom" animate.leave="slide-out-bottom">
        @if (pageOptions !== undefined && pageOptions.ceil !== undefined) {
          <div class="mb-3">
            <span class="visually-hidden" id="slider-info"></span>
            <div class="row g-0">
              <button class="btn btn-icon col-1" [disabled]="prevChapterDisabled" (click)="loadPrevChapter();resetMenuCloseTimer();" [title]="t('prev-chapter-tooltip')"><i class="fa fa-fast-backward" aria-hidden="true"></i></button>
              <button class="btn btn-icon col-2" [disabled]="prevPageDisabled || pageNum === 0" (click)="goToPage(0);resetMenuCloseTimer();" [title]="t('first-page-tooltip')"><i class="fa fa-step-backward" aria-hidden="true"></i></button>
              @if (pageOptions.ceil > 0) {
                <div class="col custom-slider">
                  <ngx-slider [options]="pageOptions" [value]="pageNum" aria-describedby="slider-info" [manualRefresh]="refreshSlider" (userChangeEnd)="sliderPageUpdate($event);startMenuCloseTimer()" (userChange)="sliderDragUpdate($event)" (userChangeStart)="cancelMenuCloseTimer();" />
                </div>
              } @else {
                <div class="col custom-slider">
                  <ngx-slider [options]="pageOptions" [value]="pageNum" aria-describedby="slider-info" (userChangeEnd)="startMenuCloseTimer()" (userChangeStart)="cancelMenuCloseTimer();" />
                </div>
              }
              <button class="btn btn-icon col-2" [disabled]="nextPageDisabled || pageNum >= maxPages - 1" (click)="goToPage(this.maxPages);resetMenuCloseTimer();" [title]="t('last-page-tooltip')"><i class="fa fa-step-forward" aria-hidden="true"></i></button>
              <button class="btn btn-icon col-1" [disabled]="nextChapterDisabled" (click)="loadNextChapter();resetMenuCloseTimer();" [title]="t('next-chapter-tooltip')"><i class="fa fa-fast-forward" aria-hidden="true"></i></button>
            </div>
          </div>
        }
        <div class="row pt-4 ms-2 me-2 mb-2">
          <div class="col d-flex justify-content-center">
            <button class="btn btn-icon" (click)="setReadingDirection();resetMenuCloseTimer();" [disabled]="readerMode === ReaderMode.Webtoon || readerMode === ReaderMode.UpDown" aria-describedby="reading-direction" [title]="t('reading-direction-tooltip') + (readingDirection === ReadingDirection.LeftToRight ? t('left-to-right-alt') : t('right-to-left-alt'))">
              <i class="fa fa-angle-double-{{readingDirection === ReadingDirection.LeftToRight ? 'right' : 'left'}}" aria-hidden="true"></i>
              <span id="reading-direction" class="visually-hidden">{{readingDirection === ReadingDirection.LeftToRight ? t('left-to-right-alt') : t('right-to-left-alt')}}</span>
            </button>
          </div>
          <div class="col d-flex justify-content-center">
            <button class="btn btn-icon" [title]="t('reading-mode-tooltip')" (click)="toggleReaderMode();resetMenuCloseTimer();">
              <i class="fa {{readerMode | readerModeIcon}}" aria-hidden="true"></i>
              <span class="visually-hidden">{{t('reading-mode-tooltip')}}</span>
            </button>
          </div>
          <div class="col d-flex justify-content-center">
            <button class="btn btn-icon" title="{{isFullscreen ? t('collapse') : t('fullscreen')}}" (click)="toggleFullscreen();resetMenuCloseTimer();">
              <i class="fa {{isFullscreen | fullscreenIcon}}" aria-hidden="true"></i>
              <span class="visually-hidden">{{isFullscreen ? t('collapse') : t('fullscreen')}}</span>
            </button>
          </div>
          <div class="col d-flex justify-content-center">
            <button class="btn btn-icon" [title]="t('settings-tooltip')" (click)="settingsOpen = !settingsOpen;resetMenuCloseTimer();">
              <i class="fa fa-sliders-h" aria-hidden="true"></i>
              <span class="visually-hidden">{{t('settings-tooltip')}}</span>
            </button>
          </div>
        </div>
        @if (settingsOpen && generalSettingsForm) {
          <div class="bottom-menu">
            <form [formGroup]="generalSettingsForm">
              <div class="row mb-2">
                <div class="col-md-6 col-sm-12">
                  <label for="page-splitting" class="form-label">{{t('image-splitting-label')}}</label>&nbsp;
                  <div class="split fa fa-image">
                    <div class="{{SplitIconClass}}"></div>
                  </div>
                  <select class="form-control" id="page-splitting" formControlName="pageSplitOption">
                    @for (opt of pageSplitOptionsTranslated; track opt.value) {
                      <option [value]="opt.value">{{opt.text}}</option>
                    }
                  </select>
                </div>

                <div class="col-md-6 col-sm-12">
                  <label for="page-fitting" class="form-label">{{t('image-scaling-label')}}</label>&nbsp;<i class="{{FittingOption | fittingIcon}}" aria-hidden="true"></i>
                  <select class="form-control" id="page-fitting" formControlName="fittingOption">
                    <option value="full-height">{{t('height')}}</option>
                    <option value="full-width">{{t('width')}}</option>
                    <option value="original">{{t('original')}}</option>
                  </select>
                </div>
              </div>

              <div class="row mb-2">
                <div class="col-md-6 col-sm-12">
                  <label for="layout-mode" class="form-label">Layout Mode</label>&nbsp;
                  @switch (layoutMode) {
                    @case (LayoutMode.Single) {
                      <div class="split-double">
                        <span class="fa-stack fa-1x">
                            <i class="fa-regular fa-square-full fa-stack-2x"></i>
                            <i class="fa fa-image fa-stack-1x"></i>
                        </span>
                      </div>
                    }
                    @case (LayoutMode.Double) {
                      <div class="split-double">
                        <span class="fa-stack fa-1x">
                            <i class="fa-regular fa-square-full fa-stack-2x"></i>
                            <i class="fab fa-1 fa-stack-1x"></i>
                        </span>
                        <span class="fa-stack fa right">
                          <i class="fa-regular fa-square-full fa-stack-2x"></i>
                          <i class="fab fa-2 fa-stack-1x"></i>
                        </span>
                      </div>
                    }
                    @case (LayoutMode.DoubleReversed) {
                      <div class="split-double">
                        <span class="fa-stack fa-1x">
                            <i class="fa-regular fa-square-full fa-stack-2x"></i>
                            <i class="fab fa-2 fa-stack-1x"></i>
                        </span>
                        <span class="fa-stack fa right">
                          <i class="fa-regular fa-square-full fa-stack-2x"></i>
                          <i class="fab fa-1 fa-stack-1x"></i>
                        </span>
                      </div>
                    }
                  }

                  <select class="form-control" id="layout-mode" formControlName="layoutMode">
                    @for (opt of layoutModesTranslated; track opt.value) {
                      <option [value]="opt.value">{{opt.text}}</option>
                    }
                  </select>
                </div>
                <div class="col-md-3 col-sm-12">
                  <div class="mb-3">
                    <div class="form-check form-switch">
                      <input type="checkbox" id="auto-close" formControlName="autoCloseMenu" class="form-check-input" switch>
                      <label class="form-check-label" for="auto-close">{{t('auto-close-menu-label')}}</label>
                    </div>
                  </div>

                  <div class="mb-3">
                    <div class="form-check form-switch">
                      <input type="checkbox" id="swipe-to-paginate" formControlName="swipeToPaginate" class="form-check-input" switch>
                      <label class="form-check-label" for="swipe-to-paginate">{{t('swipe-enabled-label')}}</label>
                    </div>
                  </div>
                </div>
                <div class="col-md-3 col-sm-12">
                  <div class="mb-3">
                    <div class="form-check form-switch">
                      <input type="checkbox" id="emulate-book" formControlName="emulateBook" class="form-check-input" switch>
                      <label class="form-check-label" for="emulate-book">{{t('emulate-comic-book-label')}}</label>
                    </div>
                  </div>

                  <div class="mb-3">
                    <div class="form-check form-switch" [title]="generalSettingsForm.get('pageOffset')?.disabled ? t('offset-only-double') : ''">
                      <input type="checkbox" id="page-offset" formControlName="pageOffset" class="form-check-input" switch>
                      <label class="form-check-label" for="page-offset">{{t('page-offset-label')}}</label>
                    </div>
                  </div>
                </div>
              </div>
              <div class="row mb-2">
                <div class="col-md-6 col-sm-12">
                  <label for="darkness" class="form-label range-label">{{t('brightness-label')}}</label>
                  <span class="ms-1 range-text">{{generalSettingsForm.get('darkness')?.value + '%'}}</span>
                  <input type="range" class="form-range" id="darkness"
                         min="10" max="100" step="1" formControlName="darkness">
                </div>

                <div class="col-md-6 col-sm-12">
                  <label for="width-override-slider" class="form-label">{{t('width-override-label')}}:
                    @if (widthOverrideLabel$ | async; as widthOverrideLabel) {
                      {{ widthOverrideLabel ? widthOverrideLabel : t('off') }}
                    }
                    @else {
                      {{t('off')}}
                    }
                  </label>
                  <input id="width-override-slider" type="range" min="0" max="100" class="form-range" formControlName="widthSlider">
                </div>


                <div class="d-flex flex-column flex-sm-row gap-2">
                  <button class="btn btn-primary"
                          [disabled]="readingProfile.kind !== ReadingProfileKind.Implicit || !parentReadingProfile"
                          (click)="updateParentPref()">
                    {{ t('update-parent', {name: parentReadingProfile?.name || t('loading')}) }}
                  </button>
                  <button class="btn btn-primary ms-sm-2"
                          [ngbTooltip]="t('create-new-tooltip')"
                          [disabled]="readingProfile.kind !== ReadingProfileKind.Implicit"
                          (click)="createNewProfileFromImplicit()">
                    {{ t('create-new') }}
                  </button>
                </div>
              </div>
            </form>
          </div>
        }
      </div>
    }

  </div>

</ng-container>
