@let isLeftToRight = readingDirection() === ReadingDirection.LeftToRight;

<div class="container-flex {{darkMode() ? 'dark-mode' : ''}} reader-container {{layoutMode() | columnLayoutClass}} {{writingStyle() | writingStyleClass}}"
     tabindex="0" #reader>
  <ng-container *transloco="let t; prefix: 'book-reader'">
    <div class="fixed-top" #stickyTop>
      <a class="visually-hidden-focusable focus-visible" href="javascript:void(0);" (click)="moveFocus()">{{t('skip-header')}}</a>
      <ng-container [ngTemplateOutlet]="topActionBar"  [ngTemplateOutletContext]="{isTop: true}" />
      @if (page() !== undefined) {
        <app-book-line-overlay [parent]="bookContainerElemRef()"
                               [libraryId]="libraryId"
                               [volumeId]="volumeId"
                               [chapterId]="chapterId"
                               [seriesId]="seriesId"
                               [pageNumber]="pageNum()"
                               (isOpen)="updateLineOverlayOpen($event)"
                               (refreshToC)="refreshPersonalToC()" />
      }
    </div>

    @if (clickToPaginate() && !hidePagination()) {
      <div class="tap-to-paginate">
        <div class="left {{clickOverlayClass('left')}} no-observe"
            (click)="movePage(isLeftToRight ? PAGING_DIRECTION.BACKWARDS : PAGING_DIRECTION.FORWARD)"
            [ngClass]="{'immersive' : immersiveMode()}"
            tabindex="-1"></div>
        <div class="{{scrollbarNeeded() ? 'right-with-scrollbar' : 'right'}} {{clickOverlayClass('right')}} no-observe"
            (click)="movePage(isLeftToRight ? PAGING_DIRECTION.FORWARD : PAGING_DIRECTION.BACKWARDS)"
            [ngClass]="{'immersive' : immersiveMode()}"
            tabindex="-1"></div>
      </div>
    }
    <div #readingSection class="reading-section {{layoutMode() | columnLayoutClass}} {{writingStyle() | writingStyleClass}}"
         [ngStyle]="{'width': pageWidthForPagination()}"
         [ngClass]="{'immersive' : immersiveMode() || !actionBarVisible(), 'is-loading': isLoading()}" (click)="handleReaderClick($event)">


      <div #bookContainer class="book-container {{writingStyle() | writingStyleClass}}"
            [ngClass]="{'immersive' : immersiveMode()}"
            (mousedown)="mouseDown($event)" >

        <div #readingHtml class="book-content {{layoutMode() | columnLayoutClass}} {{writingStyle() | writingStyleClass}}"
             [ngStyle]="{'max-height': columnHeight(), 'max-width': verticalBookContentWidth(), 'width': verticalBookContentWidth(), 'column-width': columnWidth(), 'padding-bottom': bookContentPaddingBottom()}"
             [ngClass]="{'immersive': immersiveMode() && actionBarVisible, 'debug': debugMode()}"
             [innerHtml]="page()" (click)="toggleMenu($event)" (mousedown)="mouseDown($event)" (wheel)="onWheel($event)"></div>

          @if (shouldShowBottomActionBar()) {
            <div class="bottom-bar" (click)="$event.stopPropagation();">
              <ng-container [ngTemplateOutlet]="bottomActionBar" [ngTemplateOutletContext]="{isTop: false}" />
            </div>
          }
      </div>
    </div>

    <ng-template #topActionBar>
      @if (shouldShowMenu()) {
        <div class="reader-header">
          <div class="action-bar top-action-bar px-2">
            <div>
              <button class="btn btn-secondary me-2" (click)="toggleDrawer()">
                <i class="fa fa-bars" aria-hidden="true"></i>
              </button>
            </div>

            <div class="text-center center-group">
              @if (isLoading()) {
                <div class="spinner-border spinner-border-sm text-primary" style="border-radius: 50%;" role="status">
                  <span class="visually-hidden">{{ t('loading-book') }}</span>
                </div>
              } @else {
                <div class="d-flex">
                  @if (incognitoMode()) {
                    <span (click)="turnOffIncognito()" role="button" [attr.aria-label]="t('incognito-mode-alt')">
                    (<i class="fa fa-glasses" aria-hidden="true"></i><span class="visually-hidden">{{ t('incognito-mode-label') }}</span>)
                  </span>
                  }
                  <span class="ms-1 book-title-text" [ngbTooltip]="bookTitle() + ' - ' + authorText()">
                  {{ bookTitle() }}
                    @if (breakpointService.isDesktopOrAbove()) {
                      - {{ authorText() }}
                    }
                </span>
                </div>
              }
            </div>

            <div class="d-flex align-items-center right-group">
              @if (!this.adhocPageHistory.isEmpty()) {
                <button class="btn btn-secondary btn-icon me-1" (click)="goBack()" [title]="t('go-back')">
                  <i class="fa fa-reply" aria-hidden="true"></i>
                </button>
              }

              @if (debugMode()) {
                <button class="btn btn-secondary btn-icon me-1" (click)="logSelectedElement()">
                  B
                </button>
                <button class="btn btn-secondary btn-icon me-1" (click)="debugInsertViewportView()">
                  V
                </button>
              }

              <button class="btn btn-icon me-1" [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>

              <button class="btn btn-secondary btn-icon me-1" (click)="viewBookmarkImages()">
                <i class="fa-solid fa-book-bookmark" aria-hidden="true"></i>
              </button>
              <button class="btn btn-secondary btn-icon me-1" (click)="viewAnnotations()">
                <i class="fa-solid fa-highlighter" aria-hidden="true"></i>
              </button>
              <button class="btn btn-secondary btn-icon me-1" (click)="viewToCDrawer()">
                <i class="fa-regular fa-rectangle-list" aria-hidden="true"></i>
              </button>
              <button class="btn btn-secondary btn-icon me-1" (click)="closeReader()">
                <i class="fa fa-times-circle" aria-hidden="true"></i>
              </button>
            </div>
          </div>
        </div>
      }
    </ng-template>

    <ng-template #bottomActionBar>
      <div class="action-bar g-0 justify-content-between align-items-center">

        <div class="d-flex justify-content-start">
          <button class="btn btn-outline-secondary btn-icon ms-sm-5"
                  (click)="movePage(isLeftToRight ? PAGING_DIRECTION.BACKWARDS : PAGING_DIRECTION.FORWARD)"
                  [disabled]="isPrevDisabled()"
                  title="{{isLeftToRight ? t('previous') : t('next')}} Page">
            <i class="fa {{(isLeftToRight ? IsPrevChapter : IsNextChapter) ? 'fa-angle-double-left' : 'fa-angle-left'}} {{isLeftToRight ? '' : 'next-page-highlight'}}" aria-hidden="true"></i>
          </button>

          @if (!this.adhocPageHistory.isEmpty()) {
            <button class="btn btn-outline-secondary btn-icon ms-1" (click)="goBack()" [title]="t('go-back')">
              <i class="fa fa-reply" aria-hidden="true"></i>
            </button>
          }
        </div>


        <div class="d-flex mt-2 justify-content-center">
          @if(!isLoading()) {
            <span class="me-1">
              <a class="btn-link" style="width: 100%" href="javascript:void(0);" (click)="goToPage()" [title]="t('go-to-page')">
                {{t('page-num-label', {page: virtualizedPageNum() + 1})}}</a> / {{virtualizedMaxPages()}}
            </span>

            <div class="d-none d-sm-block">
              <span class="dot-separator mx-1"></span>
              {{t('completion-label', {percent: (virtualizedPageNum() / virtualizedMaxPages()) | percent})}}
              @if (readingTimeLeftResource.value(); as timeLeft) {
                <span class="dot-separator mx-1"></span>
                <span class="time-left">
                    <i class="fa-solid fa-clock" aria-hidden="true"></i>
                  {{timeLeft! | readTimeLeft:true }}
                </span>
              }
            </div>
          }

          @if (debugMode()) {
            @let vp = getVirtualPage();
            <span class="ms-2">{{vp[0] * vp[2]}} / {{vp[1] * vp[2]}}</span>
          }

        </div>

        <div class="d-flex justify-content-end">
          <button class="btn btn-outline-secondary btn-icon me-sm-5"
                  [disabled]="isNextDisabled()"
                  (click)="movePage(isLeftToRight ? PAGING_DIRECTION.FORWARD : PAGING_DIRECTION.BACKWARDS)"
                  title="{{isLeftToRight ? t('next') : t('previous')}} Page">
            <i class="fa {{(isLeftToRight ? IsNextChapter : IsPrevChapter) ? 'fa-angle-double-right' : 'fa-angle-right'}} {{readingDirection() === ReadingDirection.LeftToRight ? 'next-page-highlight' : ''}}" aria-hidden="true"></i>
          </button>
        </div>

      </div>
    </ng-template>
  </ng-container>
</div>