@if (isLoading) {
  <div class="loading-container">
    <p-progressSpinner></p-progressSpinner>
  </div>
}

@if (!isLoading) {
  <ngx-extended-pdf-viewer
    [src]="bookData"
    [authorization]="authorization"
    [textLayer]="true"
    [showHandToolButton]="true"
    [height]="'auto'"
    [theme]="isDarkTheme ? 'dark' : 'light'"
    [page]="page"
    [rotation]="rotation"
    [zoom]="zoom"
    [spread]="spread"
    [enablePrint]="canPrint"
    [customToolbar]="additionalButtons"
    (pagesLoaded)="onPdfPagesLoaded($event)"
    (pageChange)="onPageChange($event)"
    (zoomChange)="onZoomChange($event)"
    (spreadChange)="onSpreadChange($event)"
    (annotationEditorEvent)="onAnnotationEditorEvent()">
  </ngx-extended-pdf-viewer>

  <ng-template #additionalButtons>
    <div id="toolbarViewer">
      <div id="toolbarViewerLeft">
        <pdf-toggle-sidebar></pdf-toggle-sidebar>
        <pdf-find-button></pdf-find-button>
        <pdf-paging-area></pdf-paging-area>
      </div>
      <pdf-zoom-toolbar></pdf-zoom-toolbar>
      <div id="toolbarViewerRight" [class.pdf-dark]="isDarkTheme">
        <pdf-hand-tool></pdf-hand-tool>
        <pdf-select-tool></pdf-select-tool>
        <pdf-rotate-page></pdf-rotate-page>
        @if (canPrint) {
          <pdf-print></pdf-print>
        }
        <pdf-no-spread [scrollMode]="scrollMode"></pdf-no-spread>
        <pdf-even-spread [scrollMode]="scrollMode"></pdf-even-spread>
        <pdf-odd-spread [scrollMode]="scrollMode"></pdf-odd-spread>
        <pdf-infinite-scroll [scrollMode]="scrollMode" [pageViewMode]="pageViewMode"></pdf-infinite-scroll>
        <pdf-horizontal-scroll [scrollMode]="scrollMode" [pageViewMode]="pageViewMode"></pdf-horizontal-scroll>
        <pdf-vertical-scroll-mode [scrollMode]="scrollMode" [pageViewMode]="pageViewMode"></pdf-vertical-scroll-mode>
        <pdf-wrapped-scroll-mode [scrollMode]="scrollMode" [pageViewMode]="pageViewMode"></pdf-wrapped-scroll-mode>
        <pdf-single-page-mode [scrollMode]="scrollMode" [pageViewMode]="pageViewMode"></pdf-single-page-mode>
        <pdf-book-mode [scrollMode]="scrollMode" [pageViewMode]="pageViewMode"></pdf-book-mode>
        <div class="verticalToolbarSeparator hiddenSmallView"></div>
        <pdf-toggle-secondary-toolbar></pdf-toggle-secondary-toolbar>
        <div class="verticalToolbarSeparator"></div>
        <pdf-highlight-editor></pdf-highlight-editor>
        <pdf-text-editor></pdf-text-editor>
        <pdf-draw-editor></pdf-draw-editor>
        <div class="verticalToolbarSeparator"></div>
        <button class="toolbar-btn" [title]="isDarkTheme ? ('readerPdf.toolbar.switchToLightMode' | transloco) : ('readerPdf.toolbar.switchToDarkMode' | transloco)" (click)="isDarkTheme = !isDarkTheme">
          @if (isDarkTheme) {
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/>
            </svg>
          } @else {
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>
            </svg>
          }
        </button>
        <button id="closePdfReaderButton" class="close-reader-btn" [title]="'readerPdf.toolbar.closePdfReader' | transloco" (click)="closeReader()">
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
            <path d="M18 6 6 18"/><path d="m6 6 12 12"/>
          </svg>
        </button>
      </div>
    </div>
  </ng-template>
}