<ng-container *transloco="let t; prefix: 'readerEbook.footer'">
<div class="reader-navbar" [class.visible]="navbarVisible">
  <button class="icon-btn" [title]="t('previousSection')" [disabled]="!canGoPrevious" (click)="onPreviousSection()">
    <app-reader-icon name="chevron-left"></app-reader-icon>
  </button>

  <div class="progress-section">
    <button class="location-btn" (click)="toggleLocationPopover()" [title]="t('location')">
      <span class="location-text">{{ currentPercentage }}%</span>
    </button>

    <div class="progress-slider-wrapper">
      <input
        type="range"
        class="progress-slider"
        [min]="0"
        [max]="100"
        [value]="currentPercentage"
        (input)="onProgressChange($event)"
        [title]="t('progress')"/>
      <div class="progress-ticks">
        @for (frac of displaySectionFractions; track frac) {
          <span class="progress-tick" [style.left.%]="frac * 100"></span>
        }
      </div>
    </div>
  </div>

  <button class="icon-btn" [title]="t('nextSection')" [disabled]="!canGoNext" (click)="onNextSection()">
    <app-reader-icon name="chevron-right"></app-reader-icon>
  </button>
</div>

@if (showLocationPopover) {
  <div class="location-popover">
    <div class="popover-content">
      <div class="time-info">
        <div class="time-section">
          <span class="label">{{ t('timeLeftInSection') }}</span>
          <span class="value">{{ timeSection }}</span>
        </div>
        <div class="separator"></div>
        <div class="time-section">
          <span class="label">{{ t('timeLeftInBook') }}</span>
          <span class="value">{{ timeTotal }}</span>
        </div>
      </div>

      <div class="divider"></div>

      <div class="book-info">
        <div class="chapter-info">
          <span class="label">{{ t('chapter') }}</span>
          <span class="chapter-name">{{ currentChapter }}</span>
        </div>
        <div class="info-row">
          <div class="info-column">
            <span class="label">{{ t('section') }}</span>
            <span class="value">{{ sectionCurrent }} / {{ sectionTotal }}</span>
          </div>
          @if (progressData?.pageItem) {
            <div class="info-separator"></div>
            <div class="info-column">
              <span class="label">{{ t('page') }}</span>
              <span class="value">{{ currentPage }}</span>
            </div>
          }
        </div>
      </div>

      <div class="divider"></div>

      <div class="nav-section">
        <div class="goto-row">
          <label>{{ t('goTo') }}</label>
          <input type="number" [value]="currentPercentage" #percentInput
            (keydown.enter)="onGoToPercentage(percentInput.value)" [min]="0" [max]="100"/>
          <span>%</span>
          <button class="go-btn" (click)="onGoToPercentage(percentInput.value)" [title]="t('goToPercentage')">{{ t('go') }}</button>
        </div>
        <div class="section-navigation">
        <button class="nav-btn" [title]="t('firstSection')" (click)="onFirstSection()">
          <app-reader-icon name="chevron-first" [size]="20"></app-reader-icon>
        </button>
        <button class="nav-btn" [title]="t('previousSection')" (click)="onPreviousSection()">
          <app-reader-icon name="chevron-left" [size]="20"></app-reader-icon>
        </button>
        <button class="nav-btn" [title]="t('jumpTo')">
          <app-reader-icon name="dots-vertical" [size]="20"></app-reader-icon>
        </button>
        <button class="nav-btn" [title]="t('nextSection')" (click)="onNextSection()">
          <app-reader-icon name="chevron-right" [size]="20"></app-reader-icon>
        </button>
        <button class="nav-btn" [title]="t('lastSection')" (click)="onLastSection()">
          <app-reader-icon name="chevron-last" [size]="20"></app-reader-icon>
        </button>
      </div>
      </div>
    </div>
  </div>
}
</ng-container>
