<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PDF Viewer - {{fileName}}</title>
    <link rel="stylesheet" href="css/pdfViewer.css">
    <script>
        window.__OMNI_PDFJS_WORKER__ = '{{pdfJsWorkerUri}}';
    </script>
    <script>
        window.__OMNI_PDFJS_READY__ = import('{{pdfJsScriptUri}}').then((module) => {
            const pdfjsLib = module && module.default ? module.default : module;
            if (window.__OMNI_PDFJS_WORKER__ && pdfjsLib && pdfjsLib.GlobalWorkerOptions) {
                pdfjsLib.GlobalWorkerOptions.workerSrc = window.__OMNI_PDFJS_WORKER__;
            }
            return pdfjsLib;
        });
    </script>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="title">📄 {{fileName}}</div>
            <div class="toolbar">
                <button type="button" id="btnView" class="tool-btn active" title="View / move annotations">👁 View</button>
                <button type="button" id="btnText" class="tool-btn" title="Add text">📝 Text</button>
                <button type="button" id="btnSignature" class="tool-btn" title="Add signature">✍ Signature</button>
                <button type="button" id="btnMerge" class="tool-btn" title="Merge another PDF">🔗 Merge PDF</button>
                <button type="button" id="btnSave" class="tool-btn save-btn" title="Save">💾 Save</button>
                <button type="button" id="btnSaveAs" class="tool-btn" title="Save As">📁 Save As</button>
                <span class="page-info" id="pageInfo">1 / 1</span>
            </div>
        </div>

        <div class="zoom-controls">
            <button type="button" id="zoomOut" class="icon-btn">−</button>
            <span id="zoomLevel">100%</span>
            <button type="button" id="zoomIn" class="icon-btn">+</button>
        </div>

        <div id="loading" class="loading">Loading PDF...</div>
        <div id="error" class="error" style="display: none;"></div>

        <div id="pdfBody" class="pdf-body" style="display: none;">
            <div id="thumbnailSidebar" class="thumbnail-sidebar">
                <div class="thumbnail-help">Preview only until Save/Save As. Drag to reorder pages, × to delete page, click annotation then Delete key.</div>
                <div id="thumbnailList" class="thumbnail-list"></div>
            </div>
            <div id="pdfContainer" class="pdf-container">
                <div id="pagesContainer" class="pages-container"></div>
                <div id="overlayLayer" class="overlay-layer"></div>
            </div>
        </div>
    </div>

    <div id="textModal" class="modal" style="display: none;">
        <div class="modal-content">
            <label>Enter text:</label>
            <input type="text" id="textInput" placeholder="Type and press Enter" maxlength="200">
            <label class="modal-inline-label">Text size:
                <input type="number" id="textSizeInModal" min="8" max="96" step="1" value="12">
            </label>
            <label class="modal-inline-label">Text color:
                <input type="color" id="textColorInModal" value="#000000">
            </label>
            <div class="modal-actions">
                <button type="button" id="textConfirm" class="btn primary">OK</button>
                <button type="button" id="textCancel" class="btn">Cancel</button>
            </div>
        </div>
    </div>

    <div id="signatureModal" class="modal signature-modal" style="display: none;">
        <div class="modal-content signature-modal-content">
            <label class="signature-modal-label">Draw your signature</label>
            <label class="modal-inline-label">Signature color:
                <input type="color" id="signatureColorInModal" value="#000000">
            </label>
            <div id="signatureCanvasWrap" class="signature-canvas-modal"></div>
            <div class="modal-actions">
                <button type="button" id="signatureConfirm" class="btn primary">Add Signature</button>
                <button type="button" id="signatureCancel" class="btn">Cancel</button>
            </div>
        </div>
    </div>

    <div id="passwordModal" class="modal" style="display: none;">
        <div class="modal-content">
            <label id="passwordPromptLabel" for="passwordInput">Enter PDF password:</label>
            <input type="password" id="passwordInput" placeholder="Password" autocomplete="off">
            <div id="passwordHint" class="modal-hint" style="display: none;"></div>
            <div class="modal-actions">
                <button type="button" id="passwordConfirm" class="btn primary">Open PDF</button>
                <button type="button" id="passwordCancel" class="btn">Cancel</button>
            </div>
        </div>
    </div>

    <script id="pdf-data" type="application/json">{"base64":"{{pdfBase64}}","fileName":"{{fileName}}"}</script>
    <script src="js/pdfViewer.js"></script>
</body>
</html>
