{% extends "base.html" %}

{% block title %}PDF Tools{% endblock %}
{% block nav_pdf %}active{% endblock %}

{% block content %}
    <main>

        <!-- Merge -->
        <div id="tab-merge" class="pdf-section card active">
            <div class="card-body">
                <h2>Merge PDFs</h2>
                <p class="meta">Combine multiple PDF files into one. Drag to reorder.</p>

                <div class="drop-zone" id="merge-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
                        <polyline points="14 2 14 8 20 8"/>
                        <line x1="12" y1="18" x2="12" y2="12"/>
                        <polyline points="9 15 12 12 15 15"/>
                    </svg>
                    <label class="drop-browse">Select PDF files<input type="file" id="merge-input" accept=".pdf" multiple hidden></label>
                    <p class="drop-hint">or drop files here &middot; add as many as you like &middot; drag to reorder</p>
                </div>

                <div id="merge-list" class="file-list"></div>

                <div id="merge-actions" class="pdf-actions" hidden>
                    <button id="merge-btn" class="btn-download" onclick="doMerge()">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="square"><path d="M12 3v14M5 12l7 7 7-7"/><path d="M5 21h14"/></svg>
                        Merge PDFs
                    </button>
                </div>

                <div id="merge-error" class="error" hidden></div>
            </div>
        </div>

        <!-- Split -->
        <div id="tab-split" class="pdf-section card">
            <div class="card-body">
                <h2>Split PDF</h2>
                <p class="meta">Split a PDF into separate pages or custom ranges.</p>

                <div class="drop-zone" id="split-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
                        <polyline points="14 2 14 8 20 8"/>
                        <line x1="12" y1="18" x2="12" y2="12"/>
                        <polyline points="9 15 12 12 15 15"/>
                    </svg>
                    <label class="drop-browse">Select PDF file<input type="file" id="split-input" accept=".pdf" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; leave ranges empty to split every page</p>
                </div>

                <div id="split-file-info" class="split-info" hidden>
                    <span id="split-file-name" class="split-name"></span>
                    <span id="split-page-count" class="count-badge"></span>
                    <button class="split-remove" onclick="clearSplitFile()">&times;</button>
                </div>

                <div id="split-options" hidden>
                    <div class="field" style="margin-top: 16px;">
                        <label>Page ranges (leave empty to split all pages)</label>
                        <input type="text" id="split-ranges" placeholder="e.g. 1-3, 5, 7-10">
                    </div>
                </div>

                <div id="split-actions" class="pdf-actions" hidden>
                    <button id="split-btn" class="btn-download" onclick="doSplit()">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="square"><path d="M12 3v14M5 12l7 7 7-7"/><path d="M5 21h14"/></svg>
                        Split PDF
                    </button>
                </div>

                <div id="split-error" class="error" hidden></div>
            </div>
        </div>

        <!-- Images to PDF -->
        <div id="tab-img2pdf" class="pdf-section card">
            <div class="card-body">
                <h2>Images to PDF</h2>
                <p class="meta">Convert images to a single PDF document. Drag to reorder.</p>

                <div class="drop-zone" id="img-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
                        <circle cx="8.5" cy="8.5" r="1.5"/>
                        <polyline points="21 15 16 10 5 21"/>
                    </svg>
                    <label class="drop-browse">Select images<input type="file" id="img-input" accept="image/jpeg,image/png,image/webp" multiple hidden></label>
                    <p class="drop-hint">or drop files here &middot; JPG, PNG, WebP &middot; drag to reorder</p>
                </div>

                <div id="img-list" class="file-list"></div>

                <div id="img-actions" class="pdf-actions" hidden>
                    <button id="img-btn" class="btn-download" onclick="doImagesToPdf()">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="square"><path d="M12 3v14M5 12l7 7 7-7"/><path d="M5 21h14"/></svg>
                        Convert to PDF
                    </button>
                </div>

                <div id="img-error" class="error" hidden></div>
            </div>
        </div>
        <!-- Compress -->
        <div id="tab-compress" class="pdf-section card">
            <div class="card-body">
                <h2>Compress PDF</h2>
                <p class="meta">Reduce PDF file size by compressing content streams.</p>

                <div class="drop-zone" id="compress-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
                        <polyline points="14 2 14 8 20 8"/>
                    </svg>
                    <label class="drop-browse">Select PDF file<input type="file" id="compress-pdf-input" accept=".pdf" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; compresses streams &middot; removes redundant data</p>
                </div>

                <div id="compress-pdf-info" class="split-info" hidden>
                    <span id="compress-pdf-name" class="split-name"></span>
                    <span id="compress-pdf-size" class="file-size"></span>
                    <button class="split-remove" onclick="clearCompressPdf()">&times;</button>
                </div>

                <div id="compress-pdf-actions" class="pdf-actions" hidden>
                    <button id="compress-pdf-btn" class="btn-download" onclick="doCompressPdf()">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="square"><path d="M12 3v14M5 12l7 7 7-7"/><path d="M5 21h14"/></svg>
                        Compress PDF
                    </button>
                </div>
                <div id="compress-pdf-error" class="error" hidden></div>
            </div>
        </div>

        <!-- Extract Text -->
        <div id="tab-totext" class="pdf-section card">
            <div class="card-body">
                <h2>Extract Text</h2>
                <p class="meta">Pull all text content from a PDF into a plain text file.</p>

                <div class="drop-zone" id="totext-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
                        <polyline points="14 2 14 8 20 8"/>
                        <line x1="8" y1="13" x2="16" y2="13"/>
                        <line x1="8" y1="17" x2="16" y2="17"/>
                        <polyline points="10 9 9 9 8 9"/>
                    </svg>
                    <label class="drop-browse">Select PDF file<input type="file" id="totext-input" accept=".pdf" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; outputs a .txt file with page separators</p>
                </div>

                <div id="totext-file-info" class="split-info" hidden>
                    <span id="totext-file-name" class="split-name"></span>
                    <span id="totext-file-size" class="file-size"></span>
                    <button class="split-remove" onclick="clearTotextFile()">&times;</button>
                </div>

                <div id="totext-actions" class="pdf-actions" hidden>
                    <button id="totext-btn" class="btn-download" onclick="doToText()">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="square"><path d="M12 3v14M5 12l7 7 7-7"/><path d="M5 21h14"/></svg>
                        Extract Text
                    </button>
                </div>
                <div id="totext-error" class="error" hidden></div>
            </div>
        </div>

        <!-- Password Protect -->
        <div id="tab-password" class="pdf-section card">
            <div class="card-body">
                <h2>Password Protect</h2>
                <p class="meta">Add password protection to a PDF file.</p>

                <div class="drop-zone" id="addpw-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
                        <path d="M7 11V7a5 5 0 0110 0v4"/>
                    </svg>
                    <label class="drop-browse">Select PDF file<input type="file" id="addpw-input" accept=".pdf" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; enter a password below to protect it</p>
                </div>
                <div id="addpw-file-info" class="split-info" hidden>
                    <span id="addpw-file-name" class="split-name"></span>
                    <span id="addpw-file-size" class="file-size"></span>
                    <button class="split-remove" onclick="clearAddPwFile()">&times;</button>
                </div>
                <div id="addpw-options" hidden style="margin-top:16px;">
                    <div class="field">
                        <label>Password</label>
                        <input type="password" id="addpw-password" placeholder="Enter password to set">
                    </div>
                </div>
                <div id="addpw-actions" class="pdf-actions" hidden>
                    <button id="addpw-btn" class="btn-download" onclick="doAddPassword()">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="square"><path d="M12 3v14M5 12l7 7 7-7"/><path d="M5 21h14"/></svg>
                        Protect PDF
                    </button>
                </div>
                <div id="addpw-error" class="error" hidden></div>
            </div>
        </div>

        <!-- Unlock PDF -->
        <div id="tab-unlock" class="pdf-section card">
            <div class="card-body">
                <h2>Unlock PDF</h2>
                <p class="meta">Remove password protection from a PDF file.</p>

                <div class="drop-zone" id="removepw-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
                        <path d="M7 11V7a5 5 0 0110 0v4"/>
                    </svg>
                    <label class="drop-browse">Select PDF file<input type="file" id="removepw-input" accept=".pdf" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; enter the current password to unlock it</p>
                </div>
                <div id="removepw-file-info" class="split-info" hidden>
                    <span id="removepw-file-name" class="split-name"></span>
                    <span id="removepw-file-size" class="file-size"></span>
                    <button class="split-remove" onclick="clearRemovePwFile()">&times;</button>
                </div>
                <div id="removepw-options" hidden style="margin-top:16px;">
                    <div class="field">
                        <label>Current Password</label>
                        <input type="password" id="removepw-password" placeholder="Enter the existing password">
                    </div>
                </div>
                <div id="removepw-actions" class="pdf-actions" hidden>
                    <button id="removepw-btn" class="btn-download" onclick="doRemovePassword()">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="square"><path d="M12 3v14M5 12l7 7 7-7"/><path d="M5 21h14"/></svg>
                        Unlock PDF
                    </button>
                </div>
                <div id="removepw-error" class="error" hidden></div>
            </div>
        </div>
        <!-- Rotate Pages -->
        <div id="tab-rotatepages" class="pdf-section card">
            <div class="card-body">
                <h2>Rotate Pages</h2>
                <p class="meta">Rotate all or specific pages of a PDF by 90°, 180°, or 270°.</p>

                <div class="drop-zone" id="rotatepages-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
                        <polyline points="14 2 14 8 20 8"/>
                        <polyline points="23 4 23 10 17 10"/>
                        <path d="M20.49 15a9 9 0 11-2.12-9.36L23 10"/>
                    </svg>
                    <label class="drop-browse">Select PDF file<input type="file" id="rotatepages-input" accept=".pdf" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; choose angle and optionally target specific pages</p>
                </div>

                <div id="rotatepages-file-info" class="split-info" hidden>
                    <span id="rotatepages-file-name" class="split-name"></span>
                    <span id="rotatepages-page-count" class="count-badge"></span>
                    <button class="split-remove" onclick="clearRotatePagesFile()">&times;</button>
                </div>

                <div id="rotatepages-options" hidden>
                    <div class="control-row" style="margin-top: 16px;">
                        <div class="select-wrap">
                            <label>Angle</label>
                            <select id="rotatepages-angle">
                                <option value="90">90° clockwise</option>
                                <option value="180">180°</option>
                                <option value="270">270° clockwise (90° CCW)</option>
                            </select>
                        </div>
                    </div>
                    <div class="field" style="margin-top: 12px;">
                        <label>Pages (leave empty to rotate all)</label>
                        <input type="text" id="rotatepages-pages" placeholder="e.g. 1, 3, 5-7">
                    </div>
                </div>

                <div id="rotatepages-actions" class="pdf-actions" hidden>
                    <button id="rotatepages-btn" class="btn-download" onclick="doRotatePages()">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="square"><path d="M12 3v14M5 12l7 7 7-7"/><path d="M5 21h14"/></svg>
                        Rotate Pages
                    </button>
                </div>

                <div id="rotatepages-error" class="error" hidden></div>
            </div>
        </div>

        <!-- Extract Images -->
        <div id="tab-extractimages" class="pdf-section card">
            <div class="card-body">
                <h2>Extract Images</h2>
                <p class="meta">Pull all embedded images out of a PDF.</p>

                <div class="drop-zone" id="extractimages-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
                        <circle cx="8.5" cy="8.5" r="1.5"/>
                        <polyline points="21 15 16 10 5 21"/>
                    </svg>
                    <label class="drop-browse">Select PDF file<input type="file" id="extractimages-input" accept=".pdf" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; extracts all embedded images as PNG/JPG</p>
                </div>

                <div id="extractimages-file-info" class="split-info" hidden>
                    <span id="extractimages-file-name" class="split-name"></span>
                    <span id="extractimages-file-size" class="file-size"></span>
                    <button class="split-remove" onclick="clearExtractImagesFile()">&times;</button>
                </div>

                <div id="extractimages-actions" class="pdf-actions" hidden>
                    <button id="extractimages-btn" class="btn-download" onclick="doExtractImages()">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="square"><path d="M12 3v14M5 12l7 7 7-7"/><path d="M5 21h14"/></svg>
                        Extract Images
                    </button>
                </div>
                <div id="extractimages-error" class="error" hidden></div>
            </div>
        </div>

        <!-- Watermark -->
        <div id="tab-watermark" class="pdf-section card">
            <div class="card-body">
                <h2>Watermark PDF</h2>
                <p class="meta">Add a text watermark to every page of a PDF.</p>

                <div class="drop-zone" id="watermark-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
                        <polyline points="14 2 14 8 20 8"/>
                        <line x1="12" y1="18" x2="12" y2="12"/>
                        <polyline points="9 15 12 12 15 15"/>
                    </svg>
                    <label class="drop-browse">Select PDF file<input type="file" id="watermark-input" accept=".pdf" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; adds text watermark to every page</p>
                </div>

                <div id="watermark-file-info" class="split-info" hidden>
                    <span id="watermark-file-name" class="split-name"></span>
                    <span id="watermark-file-size" class="file-size"></span>
                    <button class="split-remove" onclick="clearWatermarkFile()">&times;</button>
                </div>

                <div id="watermark-options" hidden>
                    <div class="field" style="margin-top: 16px;">
                        <label>Watermark Text</label>
                        <input type="text" id="watermark-text" placeholder="e.g. CONFIDENTIAL, DRAFT, Sample">
                    </div>
                    <div class="field-row" style="margin-top: 12px;">
                        <div class="field" style="max-width: 120px;">
                            <label>Font Size</label>
                            <input type="number" id="watermark-fontsize" value="36" min="8" max="200">
                        </div>
                        <div class="field" style="flex: 1;">
                            <label>Opacity: <span id="watermark-opacity-val">0.3</span></label>
                            <input type="range" id="watermark-opacity" min="0.1" max="1.0" step="0.1" value="0.3">
                        </div>
                        <div class="select-wrap">
                            <label>Position</label>
                            <select id="watermark-position">
                                <option value="center">Center</option>
                                <option value="top-left">Top Left</option>
                                <option value="top-right">Top Right</option>
                                <option value="bottom-left">Bottom Left</option>
                                <option value="bottom-right">Bottom Right</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div id="watermark-actions" class="pdf-actions" hidden>
                    <button id="watermark-btn" class="btn-download" onclick="doWatermark()">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="square"><path d="M12 3v14M5 12l7 7 7-7"/><path d="M5 21h14"/></svg>
                        Add Watermark
                    </button>
                </div>
                <div id="watermark-error" class="error" hidden></div>
            </div>
        </div>

        <!-- Number Pages -->
        <div id="tab-numberpages" class="pdf-section card">
            <div class="card-body">
                <h2>Number Pages</h2>
                <p class="meta">Add page numbers to every page of a PDF.</p>

                <div class="drop-zone" id="numberpages-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
                        <polyline points="14 2 14 8 20 8"/>
                        <line x1="9" y1="15" x2="15" y2="15"/>
                    </svg>
                    <label class="drop-browse">Select PDF file<input type="file" id="numberpages-input" accept=".pdf" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; adds page numbers to the footer</p>
                </div>

                <div id="numberpages-file-info" class="split-info" hidden>
                    <span id="numberpages-file-name" class="split-name"></span>
                    <span id="numberpages-file-size" class="file-size"></span>
                    <button class="split-remove" onclick="clearNumberPagesFile()">&times;</button>
                </div>

                <div id="numberpages-options" hidden>
                    <div class="field-row" style="margin-top: 16px;">
                        <div class="select-wrap">
                            <label>Position</label>
                            <select id="numberpages-position">
                                <option value="bottom-center">Bottom Center</option>
                                <option value="bottom-left">Bottom Left</option>
                                <option value="bottom-right">Bottom Right</option>
                            </select>
                        </div>
                        <div class="field" style="max-width: 120px;">
                            <label>Start at</label>
                            <input type="number" id="numberpages-start" value="1" min="1">
                        </div>
                    </div>
                </div>

                <div id="numberpages-actions" class="pdf-actions" hidden>
                    <button id="numberpages-btn" class="btn-download" onclick="doNumberPages()">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="square"><path d="M12 3v14M5 12l7 7 7-7"/><path d="M5 21h14"/></svg>
                        Number Pages
                    </button>
                </div>
                <div id="numberpages-error" class="error" hidden></div>
            </div>
        </div>

        <!-- Reorder Pages -->
        <div id="tab-reorder" class="pdf-section card">
            <div class="card-body">
                <h2>Reorder Pages</h2>
                <p class="meta">Rearrange pages in a PDF by specifying a new page order.</p>

                <div class="drop-zone" id="reorder-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
                        <polyline points="14 2 14 8 20 8"/>
                        <line x1="12" y1="18" x2="12" y2="12"/>
                        <polyline points="9 15 12 12 15 15"/>
                    </svg>
                    <label class="drop-browse">Select PDF file<input type="file" id="reorder-input" accept=".pdf" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; specify the new page order below</p>
                </div>

                <div id="reorder-file-info" class="split-info" hidden>
                    <span id="reorder-file-name" class="split-name"></span>
                    <span id="reorder-page-count" class="count-badge"></span>
                    <button class="split-remove" onclick="clearReorderFile()">&times;</button>
                </div>

                <div id="reorder-options" hidden>
                    <div class="field" style="margin-top: 16px;">
                        <label>Page order (comma-separated page numbers)</label>
                        <input type="text" id="reorder-order" placeholder="e.g. 3, 1, 2, 4">
                    </div>
                </div>

                <div id="reorder-actions" class="pdf-actions" hidden>
                    <button id="reorder-btn" class="btn-download" onclick="doReorder()">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="square"><path d="M12 3v14M5 12l7 7 7-7"/><path d="M5 21h14"/></svg>
                        Reorder Pages
                    </button>
                </div>

                <div id="reorder-error" class="error" hidden></div>
            </div>
        </div>

        <!-- Delete Pages -->
        <div id="tab-deletepages" class="pdf-section card">
            <div class="card-body">
                <h2>Delete Pages</h2>
                <p class="meta">Remove specific pages from a PDF file.</p>

                <div class="drop-zone" id="deletepages-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
                        <polyline points="14 2 14 8 20 8"/>
                        <line x1="9" y1="14" x2="15" y2="14"/>
                    </svg>
                    <label class="drop-browse">Select PDF file<input type="file" id="deletepages-input" accept=".pdf" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; specify which pages to remove</p>
                </div>

                <div id="deletepages-file-info" class="split-info" hidden>
                    <span id="deletepages-file-name" class="split-name"></span>
                    <span id="deletepages-page-count" class="count-badge"></span>
                    <button class="split-remove" onclick="clearDeletePagesFile()">&times;</button>
                </div>

                <div id="deletepages-options" hidden>
                    <div class="field" style="margin-top: 16px;">
                        <label>Pages to delete</label>
                        <input type="text" id="deletepages-pages" placeholder="e.g. 1, 3, 5-7">
                    </div>
                </div>

                <div id="deletepages-actions" class="pdf-actions" hidden>
                    <button id="deletepages-btn" class="btn-download" onclick="doDeletePages()">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="square"><path d="M12 3v14M5 12l7 7 7-7"/><path d="M5 21h14"/></svg>
                        Delete Pages
                    </button>
                </div>

                <div id="deletepages-error" class="error" hidden></div>
            </div>
        </div>

        <!-- Edit Metadata -->
        <div id="tab-metadata" class="pdf-section card">
            <div class="card-body">
                <h2>Edit Metadata</h2>
                <p class="meta">View and edit PDF document metadata fields.</p>

                <div class="drop-zone" id="metadata-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
                        <polyline points="14 2 14 8 20 8"/>
                        <line x1="8" y1="13" x2="16" y2="13"/>
                        <line x1="8" y1="17" x2="16" y2="17"/>
                        <polyline points="10 9 9 9 8 9"/>
                    </svg>
                    <label class="drop-browse">Select PDF file<input type="file" id="metadata-input" accept=".pdf" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; view and edit title, author, subject, creator</p>
                </div>

                <div id="metadata-file-info" class="split-info" hidden>
                    <span id="metadata-file-name" class="split-name"></span>
                    <span id="metadata-file-size" class="file-size"></span>
                    <button class="split-remove" onclick="clearMetadataFile()">&times;</button>
                </div>

                <div id="metadata-options" hidden>
                    <div class="field" style="margin-top: 16px;">
                        <label>Title</label>
                        <input type="text" id="metadata-title" placeholder="Document title">
                    </div>
                    <div class="field" style="margin-top: 12px;">
                        <label>Author</label>
                        <input type="text" id="metadata-author" placeholder="Author name">
                    </div>
                    <div class="field" style="margin-top: 12px;">
                        <label>Subject</label>
                        <input type="text" id="metadata-subject" placeholder="Document subject">
                    </div>
                    <div class="field" style="margin-top: 12px;">
                        <label>Creator</label>
                        <input type="text" id="metadata-creator" placeholder="Creator application">
                    </div>
                </div>

                <div id="metadata-actions" class="pdf-actions" hidden>
                    <button id="metadata-btn" class="btn-download" onclick="doSaveMetadata()">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="square"><path d="M12 3v14M5 12l7 7 7-7"/><path d="M5 21h14"/></svg>
                        Save Metadata
                    </button>
                </div>
                <div id="metadata-error" class="error" hidden></div>
            </div>
        </div>

        <!-- PDF to Images -->
        <div id="tab-pdf2images" class="pdf-section card">
            <div class="card-body">
                <h2>PDF to Images</h2>
                <p class="meta">Render each page of a PDF as a PNG or JPG image.</p>

                <div class="drop-zone" id="pdf2images-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
                        <polyline points="14 2 14 8 20 8"/>
                        <circle cx="10" cy="13" r="2"/>
                        <path d="M20 20l-4.5-4.5L8 22"/>
                    </svg>
                    <label class="drop-browse">Select PDF file<input type="file" id="pdf2images-input" accept=".pdf" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; single page downloads as an image &middot; multiple pages as a ZIP</p>
                </div>

                <div id="pdf2images-file-info" class="split-info" hidden>
                    <span id="pdf2images-file-name" class="split-name"></span>
                    <span id="pdf2images-file-size" class="file-size"></span>
                    <span id="pdf2images-page-count" class="count-badge"></span>
                    <button class="split-remove" onclick="clearPdf2ImagesFile()">&times;</button>
                </div>

                <div id="pdf2images-options" hidden>
                    <div class="field-row" style="margin-top: 16px;">
                        <div class="select-wrap">
                            <label>Format</label>
                            <select id="pdf2images-format">
                                <option value="png">PNG</option>
                                <option value="jpg">JPG</option>
                            </select>
                        </div>
                        <div class="select-wrap">
                            <label>Resolution</label>
                            <select id="pdf2images-dpi">
                                <option value="72">72 dpi (screen)</option>
                                <option value="150" selected>150 dpi (standard)</option>
                                <option value="300">300 dpi (print)</option>
                            </select>
                        </div>
                    </div>
                    <div class="field" style="margin-top: 12px;">
                        <label>Pages (leave empty for all)</label>
                        <input type="text" id="pdf2images-pages" placeholder="e.g. 1, 3, 5-7">
                    </div>
                </div>

                <div id="pdf2images-actions" class="pdf-actions" hidden>
                    <button id="pdf2images-btn" class="btn-download" onclick="doPdf2Images()">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="square"><path d="M12 3v14M5 12l7 7 7-7"/><path d="M5 21h14"/></svg>
                        Convert to Images
                    </button>
                </div>
                <div id="pdf2images-error" class="error" hidden></div>
            </div>
        </div>

        <!-- OCR -->
        <div id="tab-ocr" class="pdf-section card">
            <div class="card-body">
                <h2>OCR</h2>
                <p class="meta">Recognise text in a scanned PDF or image using Tesseract.</p>

                <div class="drop-zone" id="ocr-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
                        <polyline points="14 2 14 8 20 8"/>
                        <line x1="8" y1="13" x2="16" y2="13"/>
                        <line x1="8" y1="17" x2="16" y2="17"/>
                        <polyline points="10 9 9 9 8 9"/>
                    </svg>
                    <label class="drop-browse">Select PDF or image<input type="file" id="ocr-input" accept=".pdf,image/*" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; PDF, PNG, JPG, TIFF &middot; requires Tesseract to be installed</p>
                </div>

                <div id="ocr-file-info" class="split-info" hidden>
                    <span id="ocr-file-name" class="split-name"></span>
                    <span id="ocr-file-size" class="file-size"></span>
                    <button class="split-remove" onclick="clearOcrFile()">&times;</button>
                </div>

                <div id="ocr-options" hidden>
                    <div class="field-row" style="margin-top: 16px;">
                        <div class="select-wrap">
                            <label>Language</label>
                            <select id="ocr-language">
                                <option value="eng" selected>English</option>
                                <option value="fra">French</option>
                                <option value="deu">German</option>
                                <option value="spa">Spanish</option>
                                <option value="ita">Italian</option>
                                <option value="por">Portuguese</option>
                                <option value="nld">Dutch</option>
                                <option value="rus">Russian</option>
                                <option value="heb">Hebrew</option>
                                <option value="ara">Arabic</option>
                                <option value="chi_sim">Chinese (Simplified)</option>
                                <option value="chi_tra">Chinese (Traditional)</option>
                                <option value="jpn">Japanese</option>
                                <option value="kor">Korean</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div id="ocr-actions" class="pdf-actions" hidden>
                    <button id="ocr-btn" class="btn-download" onclick="doOcr()">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="square"><path d="M12 3v14M5 12l7 7 7-7"/><path d="M5 21h14"/></svg>
                        Run OCR
                    </button>
                </div>
                <div id="ocr-result" hidden>
                    <div class="field" style="margin-top: 16px;">
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
                            <label>Recognised Text <span id="ocr-result-meta" class="file-size"></span></label>
                            <div style="display: flex; gap: 6px;">
                                <button class="btn-copy" onclick="copyOcrText(this)"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg> Copy</button>
                                <button class="btn-copy" onclick="downloadOcrText()"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="square"><path d="M12 3v14M5 12l7 7 7-7"/><path d="M5 21h14"/></svg> Download .txt</button>
                            </div>
                        </div>
                        <textarea id="ocr-output" class="convert-textarea" rows="12" readonly placeholder="Recognised text will appear here..."></textarea>
                    </div>
                </div>
                <div id="ocr-error" class="error" hidden></div>
            </div>
        </div>

        <!-- Office to PDF -->
        <div id="tab-office2pdf" class="pdf-section card">
            <div class="card-body">
                <h2>Office to PDF</h2>
                <p class="meta">Convert Word, Excel, PowerPoint and OpenDocument files to PDF using LibreOffice.</p>

                <div class="drop-zone" id="office2pdf-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
                        <polyline points="14 2 14 8 20 8"/>
                    </svg>
                    <label class="drop-browse">Select document<input type="file" id="office2pdf-input" accept=".doc,.docx,.odt,.rtf,.txt,.xls,.xlsx,.ods,.csv,.ppt,.pptx,.odp,.html,.epub" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; .docx .xlsx .pptx .odt .rtf and more &middot; requires LibreOffice to be installed</p>
                </div>

                <div id="office2pdf-file-info" class="split-info" hidden>
                    <span id="office2pdf-file-name" class="split-name"></span>
                    <span id="office2pdf-file-size" class="file-size"></span>
                    <button class="split-remove" onclick="clearOffice2PdfFile()">&times;</button>
                </div>

                <div id="office2pdf-actions" class="pdf-actions" hidden>
                    <button id="office2pdf-btn" class="btn-download" onclick="doOffice2Pdf()">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="square"><path d="M12 3v14M5 12l7 7 7-7"/><path d="M5 21h14"/></svg>
                        Convert to PDF
                    </button>
                </div>
                <div id="office2pdf-error" class="error" hidden></div>
            </div>
        </div>

        <!-- Stamp Image -->
        <div id="tab-stamp" class="pdf-section card">
            <div class="card-body">
                <h2>Stamp Image</h2>
                <p class="meta">Place a logo, signature or image onto pages of a PDF.</p>

                <div class="drop-zone" id="stamp-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
                        <polyline points="14 2 14 8 20 8"/>
                        <circle cx="10" cy="13" r="2"/>
                        <path d="M20 20l-4.5-4.5L8 22"/>
                    </svg>
                    <label class="drop-browse">Select PDF file<input type="file" id="stamp-input" accept=".pdf" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; then choose the image to stamp</p>
                </div>

                <div id="stamp-file-info" class="split-info" hidden>
                    <span id="stamp-file-name" class="split-name"></span>
                    <span id="stamp-file-size" class="file-size"></span>
                    <span id="stamp-page-count" class="count-badge"></span>
                    <button class="split-remove" onclick="clearStampFile()">&times;</button>
                </div>

                <div id="stamp-options" hidden>
                    <div class="field" style="margin-top: 16px;">
                        <label>Stamp image</label>
                        <div class="drop-zone" id="stamp-image-drop" style="padding: 20px;">
                            <label class="drop-browse">Select image<input type="file" id="stamp-image-input" accept="image/png,image/jpeg,image/webp,.png,.jpg,.jpeg,.webp" hidden></label>
                            <p class="drop-hint">or drop a PNG / JPG here &middot; transparent PNGs work best for signatures</p>
                        </div>
                        <div id="stamp-image-info" class="split-info" hidden>
                            <span id="stamp-image-name" class="split-name"></span>
                            <span id="stamp-image-size" class="file-size"></span>
                            <button class="split-remove" onclick="clearStampImage()">&times;</button>
                        </div>
                    </div>
                    <div class="field-row" style="margin-top: 12px;">
                        <div class="select-wrap">
                            <label>Position</label>
                            <select id="stamp-position">
                                <option value="bottom-right" selected>Bottom Right</option>
                                <option value="bottom-left">Bottom Left</option>
                                <option value="top-right">Top Right</option>
                                <option value="top-left">Top Left</option>
                                <option value="center">Center</option>
                            </select>
                        </div>
                        <div class="field" style="max-width: 140px;">
                            <label>Size (% of page width)</label>
                            <input type="number" id="stamp-scale" value="25" min="1" max="100">
                        </div>
                        <div class="field" style="flex: 1;">
                            <label>Opacity: <span id="stamp-opacity-val">100</span>%</label>
                            <input type="range" id="stamp-opacity" min="5" max="100" step="5" value="100">
                        </div>
                    </div>
                    <div class="field" style="margin-top: 12px;">
                        <label>Pages (leave empty for all)</label>
                        <input type="text" id="stamp-pages" placeholder="e.g. 1, 3, 5-7">
                    </div>
                </div>

                <div id="stamp-actions" class="pdf-actions" hidden>
                    <button id="stamp-btn" class="btn-download" onclick="doStamp()">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="square"><path d="M12 3v14M5 12l7 7 7-7"/><path d="M5 21h14"/></svg>
                        Stamp PDF
                    </button>
                </div>
                <div id="stamp-error" class="error" hidden></div>
            </div>
        </div>

        <!-- Resize Pages -->
        <div id="tab-pagesize" class="pdf-section card">
            <div class="card-body">
                <h2>Resize Pages</h2>
                <p class="meta">Scale every page to a standard paper size with the content centred.</p>

                <div class="drop-zone" id="pagesize-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
                        <polyline points="14 2 14 8 20 8"/>
                    </svg>
                    <label class="drop-browse">Select PDF file<input type="file" id="pagesize-input" accept=".pdf" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; A4, Letter, Legal, A3, A5 &middot; landscape pages stay landscape</p>
                </div>

                <div id="pagesize-file-info" class="split-info" hidden>
                    <span id="pagesize-file-name" class="split-name"></span>
                    <span id="pagesize-file-size" class="file-size"></span>
                    <span id="pagesize-page-count" class="count-badge"></span>
                    <button class="split-remove" onclick="clearPageSizeFile()">&times;</button>
                </div>

                <div id="pagesize-options" hidden>
                    <div class="field-row" style="margin-top: 16px;">
                        <div class="select-wrap">
                            <label>Paper size</label>
                            <select id="pagesize-size">
                                <option value="a4" selected>A4 (210 &times; 297 mm)</option>
                                <option value="letter">Letter (8.5 &times; 11 in)</option>
                                <option value="legal">Legal (8.5 &times; 14 in)</option>
                                <option value="a3">A3 (297 &times; 420 mm)</option>
                                <option value="a5">A5 (148 &times; 210 mm)</option>
                            </select>
                        </div>
                        <div class="select-wrap">
                            <label>Scaling</label>
                            <select id="pagesize-fit">
                                <option value="fit" selected>Fit (keep everything visible)</option>
                                <option value="fill">Fill (cover page, may crop edges)</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div id="pagesize-actions" class="pdf-actions" hidden>
                    <button id="pagesize-btn" class="btn-download" onclick="doPageSize()">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="square"><path d="M12 3v14M5 12l7 7 7-7"/><path d="M5 21h14"/></svg>
                        Resize Pages
                    </button>
                </div>
                <div id="pagesize-error" class="error" hidden></div>
            </div>
        </div>

        <!-- Flatten PDF -->
        <div id="tab-flatten" class="pdf-section card">
            <div class="card-body">
                <h2>Flatten PDF</h2>
                <p class="meta">Rasterise every page to an image so forms, annotations and layers become permanent, uneditable content.</p>

                <div class="drop-zone" id="flatten-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
                        <polyline points="14 2 14 8 20 8"/>
                    </svg>
                    <label class="drop-browse">Select PDF file<input type="file" id="flatten-input" accept=".pdf" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; renders pages at 150 dpi &middot; text will no longer be selectable</p>
                </div>

                <div id="flatten-file-info" class="split-info" hidden>
                    <span id="flatten-file-name" class="split-name"></span>
                    <span id="flatten-file-size" class="file-size"></span>
                    <span id="flatten-page-count" class="count-badge"></span>
                    <button class="split-remove" onclick="clearFlattenFile()">&times;</button>
                </div>

                <div id="flatten-actions" class="pdf-actions" hidden>
                    <button id="flatten-btn" class="btn-download" onclick="doFlatten()">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="square"><path d="M12 3v14M5 12l7 7 7-7"/><path d="M5 21h14"/></svg>
                        Flatten PDF
                    </button>
                </div>
                <div id="flatten-error" class="error" hidden></div>
            </div>
        </div>
    </main>
{% endblock %}

{% block scripts %}
    <script src="/static/pdf.js?v={{ version }}"></script>
{% endblock %}