{% extends "base.html" %}

{% block title %}Image Tools{% endblock %}
{% block nav_images %}active{% endblock %}

{% block content %}
    <main>

        <!-- Resize -->
        <div id="tab-resize" class="pdf-section card active">
            <div class="card-body">
                <h2>Resize Image</h2>
                <p class="meta">Upload an image and resize it by dimensions or percentage.</p>

                <div class="drop-zone" id="resize-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="resize-input" accept="image/*" multiple hidden></label>
                    <p class="drop-hint">or drop files here &middot; PNG, JPG, WebP, GIF &middot; batch supported &middot; resize by dimensions or %</p>
                </div>

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

                <div id="resize-file-info" class="split-info" hidden>
                    <img id="resize-thumb" class="img-thumb" src="" alt="">
                    <span id="resize-file-name" class="split-name"></span>
                    <span id="resize-dimensions" class="count-badge"></span>
                    <span id="resize-file-size" class="file-size"></span>
                    <button class="split-remove" onclick="clearResizeFile()">&times;</button>
                </div>

                <div id="resize-options" hidden>
                    <div class="control-row" style="margin-top: 16px;">
                        <div class="select-wrap">
                            <label>Mode</label>
                            <select id="resize-mode" onchange="toggleResizeMode()">
                                <option value="dimensions">Width / Height</option>
                                <option value="percentage">Percentage</option>
                            </select>
                        </div>
                    </div>

                    <div id="resize-dim-fields" class="field-row" style="margin-top: 10px;">
                        <div class="field">
                            <label>Width (px)</label>
                            <input type="number" id="resize-width" placeholder="e.g. 800" min="1">
                        </div>
                        <div class="field">
                            <label>Height (px)</label>
                            <input type="number" id="resize-height" placeholder="e.g. 600" min="1">
                        </div>
                    </div>

                    <div id="resize-pct-field" class="field" style="margin-top: 10px;" hidden>
                        <label>Percentage (%)</label>
                        <input type="number" id="resize-percentage" placeholder="e.g. 50" min="1" max="1000" value="50">
                    </div>

                    <div style="margin-top: 12px;">
                        <label class="check-label">
                            <input type="checkbox" id="resize-aspect" checked>
                            Maintain aspect ratio
                        </label>
                    </div>
                </div>

                <div id="resize-actions" class="pdf-actions" hidden>
                    <button id="resize-btn" class="btn-download" onclick="doResize()">
                        <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 Image
                    </button>
                </div>

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

        <!-- Compress -->
        <div id="tab-compress" class="pdf-section card">
            <div class="card-body">
                <h2>Compress Images</h2>
                <p class="meta">Reduce image file sizes. Drag to reorder.</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">
                        <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="compress-input" accept="image/*" multiple hidden></label>
                    <p class="drop-hint">or drop files here &middot; batch supported &middot; choose High / Medium / Low quality</p>
                </div>

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

                <div id="compress-options" hidden>
                    <div class="control-row" style="margin-top: 16px;">
                        <div class="select-wrap">
                            <label>Quality</label>
                            <select id="compress-quality">
                                <option value="high">High (85%)</option>
                                <option value="medium" selected>Medium (60%)</option>
                                <option value="low">Low (30%)</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div id="compress-actions" class="pdf-actions" hidden>
                    <button id="compress-btn" class="btn-download" onclick="doCompress()">
                        <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 Images
                    </button>
                </div>

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

        <!-- Convert Format -->
        <div id="tab-imgconvert" class="pdf-section card">
            <div class="card-body">
                <h2>Convert Image Format</h2>
                <p class="meta">Convert images between PNG, JPG, and WebP.</p>

                <div class="drop-zone" id="iconvert-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="iconvert-input" accept="image/*" multiple hidden></label>
                    <p class="drop-hint">or drop files here &middot; converts PNG ↔ JPG ↔ WebP &middot; batch supported</p>
                </div>

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

                <div id="iconvert-options" hidden>
                    <div class="control-row" style="margin-top: 16px;">
                        <div class="select-wrap">
                            <label>Target Format</label>
                            <select id="iconvert-format">
                                <option value="png">PNG</option>
                                <option value="jpg">JPG</option>
                                <option value="webp">WebP</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div id="iconvert-actions" class="pdf-actions" hidden>
                    <button id="iconvert-btn" class="btn-download" onclick="doImageConvert()">
                        <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 Images
                    </button>
                </div>

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

        <!-- Crop -->
        <div id="tab-crop" class="pdf-section card">
            <div class="card-body">
                <h2>Crop Image</h2>
                <p class="meta">Crop an image to a specific region by specifying pixel coordinates.</p>

                <div class="drop-zone" id="crop-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <polyline points="6 2 6 22"/><polyline points="2 6 6 6"/><polyline points="2 18 6 18"/>
                        <polyline points="18 2 18 22"/><polyline points="22 6 18 6"/><polyline points="22 18 18 18"/>
                    </svg>
                    <label class="drop-browse">Select image<input type="file" id="crop-input" accept="image/*" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; PNG, JPG, WebP &middot; enter pixel crop bounds below</p>
                </div>

                <div id="crop-file-info" class="split-info" hidden>
                    <img id="crop-thumb" class="img-thumb" src="" alt="">
                    <span id="crop-file-name" class="split-name"></span>
                    <span id="crop-dimensions" class="count-badge"></span>
                    <button class="split-remove" onclick="clearCropFile()">&times;</button>
                </div>

                <div id="crop-options" hidden>
                    <div class="field-row" style="margin-top: 16px;">
                        <div class="field">
                            <label>Left (px)</label>
                            <input type="number" id="crop-left" value="0" min="0">
                        </div>
                        <div class="field">
                            <label>Top (px)</label>
                            <input type="number" id="crop-top" value="0" min="0">
                        </div>
                        <div class="field">
                            <label>Right (px)</label>
                            <input type="number" id="crop-right" placeholder="full width" min="1">
                        </div>
                        <div class="field">
                            <label>Bottom (px)</label>
                            <input type="number" id="crop-bottom" placeholder="full height" min="1">
                        </div>
                    </div>
                </div>

                <div id="crop-actions" class="pdf-actions" hidden>
                    <button id="crop-btn" class="btn-download" onclick="doCrop()">
                        <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>
                        Crop Image
                    </button>
                </div>

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

        <!-- Rotate -->
        <div id="tab-rotate" class="pdf-section card">
            <div class="card-body">
                <h2>Rotate Image</h2>
                <p class="meta">Rotate an image clockwise by a set angle.</p>

                <div class="drop-zone" id="rotate-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <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 image<input type="file" id="rotate-input" accept="image/*" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; PNG, JPG, WebP &middot; choose rotation angle</p>
                </div>

                <div id="rotate-file-info" class="split-info" hidden>
                    <img id="rotate-thumb" class="img-thumb" src="" alt="">
                    <span id="rotate-file-name" class="split-name"></span>
                    <button class="split-remove" onclick="clearRotateFile()">&times;</button>
                </div>

                <div id="rotate-options" hidden>
                    <div class="control-row" style="margin-top: 16px;">
                        <div class="select-wrap">
                            <label>Angle</label>
                            <select id="rotate-angle">
                                <option value="90">90° clockwise</option>
                                <option value="180">180°</option>
                                <option value="270">270° clockwise (90° CCW)</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div id="rotate-actions" class="pdf-actions" hidden>
                    <button id="rotate-btn" class="btn-download" onclick="doRotate()">
                        <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 Image
                    </button>
                </div>

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

        <!-- Strip EXIF -->
        <div id="tab-stripexif" class="pdf-section card">
            <div class="card-body">
                <h2>Strip EXIF Data</h2>
                <p class="meta">Remove all metadata (EXIF, GPS, camera info) from an image before sharing it.</p>

                <div class="drop-zone" id="stripexif-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"/>
                        <line x1="9" y1="9" x2="15" y2="15"/>
                        <line x1="15" y1="9" x2="9" y2="15"/>
                    </svg>
                    <label class="drop-browse">Select image<input type="file" id="stripexif-input" accept="image/*" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; JPEG, PNG, WebP &middot; strips all metadata</p>
                </div>

                <div id="stripexif-file-info" class="split-info" hidden>
                    <img id="stripexif-thumb" class="img-thumb" src="" alt="">
                    <span id="stripexif-file-name" class="split-name"></span>
                    <span id="stripexif-file-size" class="file-size"></span>
                    <button class="split-remove" onclick="clearStripExifFile()">&times;</button>
                </div>

                <div id="stripexif-actions" class="pdf-actions" hidden>
                    <button id="stripexif-btn" class="btn-download" onclick="doStripExif()">
                        <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>
                        Strip EXIF
                    </button>
                </div>

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

        <!-- To ICO -->
        <div id="tab-toico" class="pdf-section card">
            <div class="card-body">
                <h2>Convert to ICO</h2>
                <p class="meta">Convert any image to a Windows .ico icon file with multiple sizes.</p>

                <div class="drop-zone" id="toico-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 image<input type="file" id="toico-input" accept="image/*" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; any image format &middot; choose icon sizes</p>
                </div>

                <div id="toico-file-info" class="split-info" hidden>
                    <img id="toico-thumb" class="img-thumb" src="" alt="">
                    <span id="toico-file-name" class="split-name"></span>
                    <button class="split-remove" onclick="clearToIcoFile()">&times;</button>
                </div>

                <div id="toico-options" hidden>
                    <div style="margin-top: 16px;">
                        <label style="display:block; margin-bottom: 8px; font-size: 0.875rem; color: var(--text-secondary);">Sizes to include</label>
                        <div style="display:flex; gap:12px; flex-wrap:wrap;">
                            <label class="check-label"><input type="checkbox" class="ico-size" value="16" checked> 16×16</label>
                            <label class="check-label"><input type="checkbox" class="ico-size" value="32" checked> 32×32</label>
                            <label class="check-label"><input type="checkbox" class="ico-size" value="48" checked> 48×48</label>
                            <label class="check-label"><input type="checkbox" class="ico-size" value="64" checked> 64×64</label>
                            <label class="check-label"><input type="checkbox" class="ico-size" value="128" checked> 128×128</label>
                            <label class="check-label"><input type="checkbox" class="ico-size" value="256" checked> 256×256</label>
                        </div>
                    </div>
                </div>

                <div id="toico-actions" class="pdf-actions" hidden>
                    <button id="toico-btn" class="btn-download" onclick="doToIco()">
                        <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 ICO
                    </button>
                </div>

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

        <!-- Flip -->
        <div id="tab-flip" class="pdf-section card">
            <div class="card-body">
                <h2>Flip Image</h2>
                <p class="meta">Mirror an image horizontally or vertically.</p>

                <div class="drop-zone" id="flip-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <polyline points="7 2 7 22"/><polyline points="17 2 17 22"/>
                        <polyline points="3 6 7 2 11 6"/><polyline points="13 6 17 2 21 6"/>
                    </svg>
                    <label class="drop-browse">Select image<input type="file" id="flip-input" accept="image/*" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; PNG, JPG, WebP &middot; flip horizontally or vertically</p>
                </div>

                <div id="flip-file-info" class="split-info" hidden>
                    <img id="flip-thumb" class="img-thumb" src="" alt="">
                    <span id="flip-file-name" class="split-name"></span>
                    <button class="split-remove" onclick="clearFlipFile()">&times;</button>
                </div>

                <div id="flip-options" hidden>
                    <div class="control-row" style="margin-top: 16px;">
                        <div class="select-wrap">
                            <label>Direction</label>
                            <select id="flip-direction">
                                <option value="horizontal">Horizontal (mirror)</option>
                                <option value="vertical">Vertical (upside down)</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div id="flip-actions" class="pdf-actions" hidden>
                    <button id="flip-btn" class="btn-download" onclick="doFlip()">
                        <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>
                        Flip Image
                    </button>
                </div>

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

        <!-- Grayscale -->
        <div id="tab-grayscale" class="pdf-section card">
            <div class="card-body">
                <h2>Grayscale</h2>
                <p class="meta">Convert an image to black and white.</p>

                <div class="drop-zone" id="grayscale-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <circle cx="12" cy="12" r="10"/>
                        <path d="M12 2a10 10 0 010 20V2z" fill="currentColor" opacity=".3"/>
                    </svg>
                    <label class="drop-browse">Select image<input type="file" id="grayscale-input" accept="image/*" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; PNG, JPG, WebP &middot; converts to B&amp;W</p>
                </div>

                <div id="grayscale-file-info" class="split-info" hidden>
                    <img id="grayscale-thumb" class="img-thumb" src="" alt="">
                    <span id="grayscale-file-name" class="split-name"></span>
                    <button class="split-remove" onclick="clearGrayscaleFile()">&times;</button>
                </div>

                <div id="grayscale-actions" class="pdf-actions" hidden>
                    <button id="grayscale-btn" class="btn-download" onclick="doGrayscale()">
                        <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 Grayscale
                    </button>
                </div>

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

        <!-- Blur -->
        <div id="tab-blur" class="pdf-section card">
            <div class="card-body">
                <h2>Blur Image</h2>
                <p class="meta">Apply Gaussian blur with adjustable intensity.</p>

                <div class="drop-zone" id="blur-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="12" cy="12" r="4" stroke-dasharray="2 2"/>
                    </svg>
                    <label class="drop-browse">Select image<input type="file" id="blur-input" accept="image/*" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; PNG, JPG, WebP &middot; adjustable blur radius</p>
                </div>

                <div id="blur-file-info" class="split-info" hidden>
                    <img id="blur-thumb" class="img-thumb" src="" alt="">
                    <span id="blur-file-name" class="split-name"></span>
                    <button class="split-remove" onclick="clearBlurFile()">&times;</button>
                </div>

                <div id="blur-options" hidden>
                    <div class="field" style="margin-top: 16px;">
                        <label>Blur Radius</label>
                        <input type="number" id="blur-radius" value="5" min="1" max="50" step="1">
                    </div>
                </div>

                <div id="blur-actions" class="pdf-actions" hidden>
                    <button id="blur-btn" class="btn-download" onclick="doBlur()">
                        <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>
                        Apply Blur
                    </button>
                </div>

                <div id="blur-error" class="error" hidden></div>
            </div>
        </div>
        <!-- QR Code Generator -->
        <div id="tab-qrcode" class="pdf-section card">
            <div class="card-body">
                <h2>QR Code Generator</h2>
                <p class="meta">Generate a QR code from any text or URL.</p>

                <div class="field" style="margin-top: 16px;">
                    <label>Text or URL</label>
                    <textarea id="qr-text" rows="3" placeholder="https://example.com" style="width:100%;font-family:inherit;resize:vertical;"></textarea>
                </div>

                <div class="field-row" style="margin-top: 12px;">
                    <div class="select-wrap">
                        <label>Size</label>
                        <select id="qr-size">
                            <option value="8">Small</option>
                            <option value="10" selected>Medium</option>
                            <option value="15">Large</option>
                            <option value="20">Extra Large</option>
                        </select>
                    </div>
                    <div class="select-wrap">
                        <label>Error Correction</label>
                        <select id="qr-ec">
                            <option value="L">Low (7%)</option>
                            <option value="M" selected>Medium (15%)</option>
                            <option value="Q">Quartile (25%)</option>
                            <option value="H">High (30%)</option>
                        </select>
                    </div>
                </div>

                <div class="field-row" style="margin-top: 12px;">
                    <div class="field">
                        <label>Foreground</label>
                        <input type="color" id="qr-fill" value="#000000" style="height:36px;width:60px;padding:2px;border:1px solid var(--border);border-radius:4px;cursor:pointer;">
                    </div>
                    <div class="field">
                        <label>Background</label>
                        <input type="color" id="qr-back" value="#ffffff" style="height:36px;width:60px;padding:2px;border:1px solid var(--border);border-radius:4px;cursor:pointer;">
                    </div>
                </div>

                <div class="pdf-actions" style="margin-top: 16px;">
                    <button id="qr-btn" class="btn-download" onclick="doQrGenerate()">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
                        Generate QR Code
                    </button>
                </div>

                <div id="qr-preview" hidden style="text-align:center;margin-top:20px;">
                    <img id="qr-img" src="" alt="QR Code" style="max-width:300px;border:1px solid var(--border);border-radius:8px;">
                    <div class="pdf-actions" style="margin-top:12px;">
                        <button class="btn-download" onclick="downloadQr()">
                            <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>
                            Download PNG
                        </button>
                    </div>
                </div>

                <div id="qr-error" class="error" hidden></div>
            </div>
        </div>
    </main>
{% endblock %}

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