<div class="pdf-viewer-wrapper">
    <div class="toolbar">
        <div class="toolbar-left">
            <button (click)="prevPage()">Prev</button>
            <span>Page {{ currentPage }} / {{ totalPages }}</span>
            <button (click)="nextPage()">Next</button>
            <button (click)="zoomIn()">+</button>
            <button (click)="zoomOut()">−</button>
            <span>{{ zoomPercentage }}%</span>
            <input type="number" [(ngModel)]="gotoPageNumber" min="1" [max]="totalPages" placeholder="Page #"
                class="goto-input" />
            <button (click)="goToPage()">Go</button>
        </div>

        <div class="toolbar-right">
            <label class="sync-scroll">
                <input type="checkbox" [(ngModel)]="isSyncScrollEnabled" />
                Sync Scroll
            </label>

            <button class="icon-button" (click)="resetZoom()" title="Reset Zoom">
                <i class="fas fa-compress"></i>
            </button>

            <button class="icon-button" (click)="fitToWidth()" title="Fit to Width">
                <i class="fas fa-arrows-alt-h"></i>
            </button>

            <button class="icon-button" (click)="fitToPage()" title="Fit to Page">
                <i class="fas fa-expand"></i>
            </button>

            <button class="icon-button" (click)="toggleDarkMode()" title="Toggle Dark Mode">
                <i class="fas fa-moon"></i>
            </button>

            <button class="icon-button" (click)="printPdf()" title="Print">
                <i class="fas fa-print"></i>
            </button>

            <button class="icon-button" (click)="downloadPdf()" title="Download PDF">
                <i class="fas fa-download"></i>
            </button>
            
        
        </div>

    </div>

    <div *ngIf="isPdfLoading" class="global-loader">Loading PDF...</div>

    <div #canvasContainer class="canvas-container" (scroll)="onScroll()"></div>
</div>