{% extends "base.html" %}

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

{% block content %}
    <main>
        <div class="hero">
            <h1>Image Tools</h1>
            <p class="subtitle">Resize, compress, and convert images — everything runs locally on your machine.</p>
        </div>

        <div class="pdf-tabs">
            <button class="pdf-tab active" data-tab="resize">Resize</button>
            <button class="pdf-tab" data-tab="compress">Compress</button>
            <button class="pdf-tab" data-tab="imgconvert">Convert Format</button>
        </div>

        <!-- 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>
    </main>
{% endblock %}

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