<div class="container-flex {{darkMode ? 'dark-mode' : ''}} reader-container" tabindex="0" #reader>
    <div class="fixed-top" #stickyTop>
        <a class="sr-only sr-only-focusable focus-visible" href="javascript:void(0);" (click)="moveFocus()">Skip to main content</a>
        <ng-container [ngTemplateOutlet]="actionBar"></ng-container>
        <app-drawer #commentDrawer="drawer" [isOpen]="drawerOpen" [style.--drawer-width]="'300px'" [options]="{topOffset: topOffset}" [style.--drawer-background-color]="drawerBackgroundColor" (drawerClosed)="closeDrawer()">
            <div header>
                <h2 style="margin-top: 0.5rem">Book Settings
                    <button type="button" class="close" aria-label="Close" (click)="commentDrawer.close()">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </h2>
                
            </div>
            <div body class="drawer-body">
                <div class="control-container">
                    <div class="controls">

                        <form [formGroup]="settingsForm">
                            <div class="form-group">
                                <label for="library-type">Font Family</label>
                                <select class="form-control" id="library-type" formControlName="bookReaderFontFamily">
                                    <option [value]="opt" *ngFor="let opt of fontFamilies; let i = index">{{opt | titlecase}}</option>
                                </select>
                            </div>
                        </form>
                    </div>
                    <div class="controls">
                        <label id="fontsize">Font Size</label>
                        <button (click)="updateFontSize(-10)" class="btn btn-icon" title="Decrease" aria-labelledby="fontsize"><i class="fa fa-minus" aria-hidden="true"></i></button>
                        <span>{{pageStyles['font-size']}}</span>
                        <button (click)="updateFontSize(10)"  class="btn btn-icon" title="Increase" aria-labelledby="fontsize"><i class="fa fa-plus" aria-hidden="true"></i></button>
                    </div>
                    <div class="controls">
                        <label id="linespacing">Line Spacing</label>
                        <button (click)="updateLineSpacing(-10)" class="btn btn-icon" title="Decrease" aria-labelledby="linespacing"><i class="fa fa-minus" aria-hidden="true"></i></button>
                        <span>{{pageStyles['line-height']}}</span>
                        <button (click)="updateLineSpacing(10)"  class="btn btn-icon" title="Increase" aria-labelledby="linespacing"><i class="fa fa-plus" aria-hidden="true"></i></button>
                    </div>
                    <div class="controls">
                        <label id="margin">Margin</label>
                        <button (click)="updateMargin(-5)" class="btn btn-icon" title="Remove Margin" aria-labelledby="margin"><i class="fa fa-minus" aria-hidden="true"></i></button>
                        <span>{{pageStyles['margin-right']}}</span>
                        <button (click)="updateMargin(5)"  class="btn btn-icon" title="Add Margin" aria-labelledby="margin"><i class="fa fa-plus" aria-hidden="true"></i></button>
                    </div>
                    <div class="controls">
                        <label id="readingdirection">Reading Direction</label>
                        <button (click)="toggleReadingDirection()" class="btn btn-icon" aria-labelledby="readingdirection" title="{{readingDirection === 0 ? 'Left to Right' : 'Right to Left'}}"><i class="fa {{readingDirection === 0 ? 'fa-arrow-right' : 'fa-arrow-left'}} " aria-hidden="true"></i><span class="phone-hidden">&nbsp;{{readingDirection === 0 ? 'Left to Right' : 'Right to Left'}}</span></button>
                    </div>
                    <div class="controls">
                        <label id="darkmode">Dark Mode</label>
                        <button (click)="toggleDarkMode(false)" class="btn btn-icon" aria-labelledby="darkmode" title="Off"><i class="fa fa-sun" aria-hidden="true"></i></button>
                        <button (click)="toggleDarkMode(true)" class="btn btn-icon" aria-labelledby="darkmode" title="On"><i class="fa fa-moon" aria-hidden="true"></i></button>
                    </div>
                    <div class="controls">
                        <label id="tap-pagination">Tap Pagination&nbsp;<i class="fa fa-info-circle" aria-hidden="true" placement="top" [ngbTooltip]="tapPaginationTooltip" role="button" tabindex="0" aria-describedby="tap-pagination-help"></i></label>
                        <ng-template #tapPaginationTooltip>The ability to click the sides of the page to page left and right</ng-template>
                        <span class="sr-only" id="tap-pagination-help">The ability to click the sides of the page to page left and right</span>
                        <button (click)="toggleClickToPaginate()" class="btn btn-icon" aria-labelledby="tap-pagination"><i class="fa fa-arrows-alt-h {{clickToPaginate ? 'icon-primary-color' : ''}}" aria-hidden="true"></i><span *ngIf="darkMode">&nbsp;{{clickToPaginate ? 'On' : 'Off'}}</span></button>
                    </div>
                    <div class="controls">
                        <label id="fullscreen">Fullscreen&nbsp;<i class="fa fa-info-circle" aria-hidden="true" placement="top" [ngbTooltip]="fullscreenTooltip" role="button" tabindex="0" aria-describedby="fullscreen-help"></i></label>
                        <ng-template #fullscreenTooltip>Put reader in fullscreen mode</ng-template>
                        <span class="sr-only" id="fullscreen-help">
                            <ng-container [ngTemplateOutlet]="fullscreenTooltip"></ng-container>
                        </span>
                        <button (click)="toggleFullscreen()" class="btn btn-icon" aria-labelledby="fullscreen">
                            <i class="fa {{this.isFullscreen ? 'fa-compress-alt' : 'fa-expand-alt'}} {{isFullscreen ? 'icon-primary-color' : ''}}" aria-hidden="true"></i>
                            <span *ngIf="darkMode">&nbsp;{{isFullscreen ? 'Exit' : 'Enter'}}</span>
                        </button>
                    </div>
                    <div class="row no-gutters justify-content-between">
                        <button (click)="resetSettings()" class="btn btn-primary col">Reset to Defaults</button>
                    </div>
                </div>
                <div class="row no-gutters">
                    <button class="btn btn-small btn-icon col-1" [disabled]="prevChapterDisabled" (click)="loadPrevChapter()" title="Prev Chapter/Volume"><i class="fa fa-fast-backward" aria-hidden="true"></i></button>
                    <div class="col-1 page-stub">{{pageNum}}</div>
                    <div class="col-8" style="margin-top: 15px;padding-right:10px">
                        <ngb-progressbar style="cursor: pointer" title="Go to page" (click)="goToPage()" type="primary" height="5px" [value]="pageNum" [max]="maxPages - 1"></ngb-progressbar>
                    </div>
                    <div class="col-1 btn-icon page-stub" (click)="goToPage(maxPages - 1)" title="Go to last page">{{maxPages - 1}}</div>
                    <button class="btn btn-small btn-icon col-1" [disabled]="nextChapterDisabled" (click)="loadNextChapter()" title="Next Chapter/Volume"><i class="fa fa-fast-forward" aria-hidden="true"></i></button>
                </div>
                <div class="table-of-contents">
                    <h3>Table of Contents</h3>
                    <div *ngIf="chapters.length === 0">
                        <em>This book does not have Table of Contents set in the metadata or a toc file</em>
                    </div>
                    <div *ngIf="chapters.length === 1; else nestedChildren">
                        <ul>
                            <li *ngFor="let chapter of chapters[0].children">
                                <a href="javascript:void(0);" (click)="loadChapterPage(chapter.page, chapter.part)">{{chapter.title}}</a>
                            </li>
                        </ul>
                    </div>
                    <ng-template #nestedChildren>
                        <ul *ngFor="let chapterGroup of chapters" class="chapter-title">
                            <li class="{{chapterGroup.page == pageNum ? 'active': ''}}" (click)="loadChapterPage(chapterGroup.page, '')">
                                {{chapterGroup.title}}
                            </li>
                            <ul *ngFor="let chapter of chapterGroup.children">
                                <li class="{{cleanIdSelector(chapter.part) === currentPageAnchor ? 'active' : ''}}">
                                    <a href="javascript:void(0);" (click)="loadChapterPage(chapter.page, chapter.part)">{{chapter.title}}</a>
                                </li>
                            </ul>
                        </ul>
                    </ng-template>
                </div>
            </div>
        </app-drawer>
    </div>

    <div #readingSection class="reading-section" [ngStyle]="{'padding-top': topOffset + 20 + 'px'}" 
        [@isLoading]="isLoading ? true : false" (click)="handleReaderClick($event)">

        <div #readingHtml class="book-content" [ngStyle]="{'padding-bottom': topOffset + 20 + 'px', 'margin': '0px 0px'}" 
            [innerHtml]="page" *ngIf="page !== undefined"></div>

        <div class="left {{clickOverlayClass('left')}} no-observe" (click)="prevPage()" *ngIf="clickToPaginate" tabindex="-1"></div>
        <div class="right {{clickOverlayClass('right')}} no-observe" (click)="nextPage()" *ngIf="clickToPaginate" tabindex="-1"></div>
        
        <div *ngIf="page !== undefined && scrollbarNeeded">
            <ng-container [ngTemplateOutlet]="actionBar"></ng-container>
        </div>
    </div>

    <ng-template #actionBar>
        <div class="reading-bar row no-gutters justify-content-between">
            <button class="btn btn-outline-secondary btn-icon col-2  col-xs-1" (click)="prevPage()" 
                [disabled]="IsPrevDisabled" 
                title="{{readingDirection === ReadingDirection.LeftToRight ? 'Previous' : 'Next'}} Page">
                <i class="fa {{(readingDirection === ReadingDirection.LeftToRight ? pageNum === 0 : pageNum + 1 >= maxPages - 1) ? 'fa-angle-double-left' : 'fa-angle-left'}}" aria-hidden="true"></i>
                <span class="phone-hidden">&nbsp;{{readingDirection === ReadingDirection.LeftToRight ? 'Previous' : 'Next'}}</span>
            </button>
            <button *ngIf="!this.adhocPageHistory.isEmpty()" class="btn btn-outline-secondary btn-icon col-2 col-xs-1" (click)="goBack()" title="Go Back"><i class="fa fa-reply" aria-hidden="true"></i><span class="phone-hidden">&nbsp;Go Back</span></button>
            <button class="btn btn-secondary col-2 col-xs-1" (click)="toggleDrawer()"><i class="fa fa-bars" aria-hidden="true"></i><span class="phone-hidden">&nbsp;Settings</span></button>
            <div class="book-title col-2 phone-hidden">{{bookTitle}}  <span *ngIf="incognitoMode" (click)="turnOffIncognito()" role="button" aria-label="Incognito mode is on. Toggle to turn off.">(<i class="fa fa-glasses"  aria-hidden="true"></i><span class="sr-only">Incognito Mode</span>)</span></div>
            <button class="btn btn-secondary col-2 col-xs-1" (click)="closeReader()"><i class="fa fa-times-circle" aria-hidden="true"></i><span class="phone-hidden">&nbsp;Close</span></button>
            <button class="btn btn-outline-secondary btn-icon col-2  col-xs-1" 
                [disabled]="IsNextDisabled" 
                (click)="nextPage()" title="{{readingDirection === ReadingDirection.LeftToRight ? 'Next' : 'Previous'}} Page">
                <span class="phone-hidden">{{readingDirection === ReadingDirection.LeftToRight ? 'Next' : 'Previous'}}&nbsp;</span>
                <i class="fa {{(readingDirection === ReadingDirection.LeftToRight ? pageNum + 1 > maxPages - 1 : pageNum === 0) ? 'fa-angle-double-right' : 'fa-angle-right'}}" aria-hidden="true"></i>
            </button>
        </div>
    </ng-template>

</div>