<div class="cbx-footer" [class.visible]="isVisible">

  @if (state.hasSeries) {
    <button
      class="nav-btn series-btn"
      (click)="onPreviousBook()"
      [disabled]="!state.previousBookInSeries"
      [title]="getPreviousBookTooltip()">
      <app-reader-icon name="chevron-double-left" [size]="14" />
      <span class="label hide-on-mobile">{{ 'readerCbx.footer.prevBook' | transloco }}</span>
    </button>
  }

  <div class="page-nav-left">
    <button class="nav-btn" (click)="onFirstPage()" [disabled]="!canGoPrevious" [title]="'readerCbx.footer.firstPage' | transloco">
      <app-reader-icon name="chevron-first" [size]="16" />
    </button>
    <button class="nav-btn" (click)="onPreviousPage()" [disabled]="!canGoPrevious" [title]="'readerCbx.footer.previousPage' | transloco">
      <app-reader-icon name="chevron-left" [size]="16" />
    </button>
    <div class="page-info">
      <span class="current">{{ displayPage }}</span>
      @if (displaySecondPage) {
        <span class="separator">-{{ displaySecondPage }}</span>
      }
      <span class="total"> {{ 'readerCbx.footer.of' | transloco }} {{ state.totalPages }}</span>
    </div>

    <button class="nav-btn" (click)="onNextPage()" [disabled]="!canGoNext" [title]="'readerCbx.footer.nextPage' | transloco">
      <app-reader-icon name="chevron-right" [size]="16" />
    </button>
    <button class="nav-btn" (click)="onLastPage()" [disabled]="!canGoNext" [title]="'readerCbx.footer.lastPage' | transloco">
      <app-reader-icon name="chevron-last" [size]="16" />
    </button>
  </div>

  <div class="page-controls">
    <div class="slider-wrapper">
      <input
        type="range"
        class="page-slider"
        [min]="1"
        [max]="state.totalPages"
        [value]="sliderValue"
        (input)="onSliderChange($event)"
        list="page-ticks"
        [title]="'readerCbx.footer.pageSlider' | transloco"/>
      <datalist id="page-ticks">
        @for (tick of sliderTicks; track tick) {
          <option [value]="tick"></option>
        }
      </datalist>
    </div>

    <div class="goto-page-wrapper">
      <div class="goto-page">
        <input
          type="number"
          [(ngModel)]="goToPageInput"
          [min]="1"
          [max]="state.totalPages"
          [placeholder]="'readerCbx.footer.pagePlaceholder' | transloco"
          class="page-input"
          (keyup.enter)="onGoToPage()"
        />
        <button
          class="go-btn"
          (click)="onGoToPage()"
          [disabled]="goToPageInput === null || goToPageInput < 1 || goToPageInput > state.totalPages">
          {{ 'readerCbx.footer.go' | transloco }}
        </button>
      </div>
    </div>
  </div>

  <div class="page-nav-right">

  </div>

  @if (state.hasSeries) {
    <button
      class="nav-btn series-btn"
      (click)="onNextBook()"
      [disabled]="!state.nextBookInSeries"
      [title]="getNextBookTooltip()">
      <span class="label hide-on-mobile">{{ 'readerCbx.footer.nextBook' | transloco }}</span>
      <app-reader-icon name="chevron-double-right" [size]="14" />
    </button>
  }
</div>
