{% extends "base.html" %}

{% block title %}Text Tools{% endblock %}
{% block nav_text %}active{% endblock %}

{% block content %}
    <main class="text-page">

        <!-- Word Count -->
        <div id="tab-wordcount" class="pdf-section card active">
            <div class="card-body">
                <h2>Word Counter</h2>
                <p class="meta">Live statistics as you type.</p>

                <div class="field" style="margin-top: 16px;">
                    <label>Text</label>
                    <textarea id="wc-input" class="convert-textarea" rows="10" placeholder="Paste or type your text here..." oninput="updateWordCount()"></textarea>
                </div>

                <div id="wc-stats" style="margin-top: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px;">
                    <div class="wc-stat">
                        <div id="wc-chars" class="wc-num">0</div>
                        <div class="wc-label">Characters</div>
                    </div>
                    <div class="wc-stat">
                        <div id="wc-chars-no-spaces" class="wc-num">0</div>
                        <div class="wc-label">No spaces</div>
                    </div>
                    <div class="wc-stat">
                        <div id="wc-words" class="wc-num">0</div>
                        <div class="wc-label">Words</div>
                    </div>
                    <div class="wc-stat">
                        <div id="wc-lines" class="wc-num">0</div>
                        <div class="wc-label">Lines</div>
                    </div>
                    <div class="wc-stat">
                        <div id="wc-sentences" class="wc-num">0</div>
                        <div class="wc-label">Sentences</div>
                    </div>
                    <div class="wc-stat">
                        <div id="wc-read-time" class="wc-num">0 min</div>
                        <div class="wc-label">Reading time</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Find & Replace -->
        <div id="tab-findreplace" class="pdf-section card">
            <div class="card-body">
                <h2>Find &amp; Replace</h2>
                <p class="meta">Search and replace text with optional regex and case-sensitivity.</p>

                <div class="field-row" style="margin-top: 16px; gap: 8px; flex-wrap: wrap;">
                    <div class="field" style="flex: 1; min-width: 180px;">
                        <label>Find</label>
                        <input type="text" id="fr-find" placeholder="Search for...">
                    </div>
                    <div class="field" style="flex: 1; min-width: 180px;">
                        <label>Replace with</label>
                        <input type="text" id="fr-replace" placeholder="Replace with...">
                    </div>
                </div>

                <div style="margin-top: 10px; display: flex; gap: 16px; flex-wrap: wrap;">
                    <label class="check-label"><input type="checkbox" id="fr-case"> Case sensitive</label>
                    <label class="check-label"><input type="checkbox" id="fr-regex"> Use regex</label>
                </div>

                <div class="field" style="margin-top: 12px;">
                    <label>Input text</label>
                    <textarea id="fr-input" class="convert-textarea" rows="6" placeholder="Paste text here..."></textarea>
                </div>

                <div class="pdf-actions" style="margin-top: 12px; display: flex; gap: 8px;">
                    <button class="btn-download" onclick="doFindReplace()">
                        <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>
                        Replace
                    </button>
                </div>

                <div class="field" style="margin-top: 12px;">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
                        <label>Output</label>
                        <button class="btn-copy" onclick="copyText('fr-output', 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>
                    </div>
                    <textarea id="fr-output" class="convert-textarea" rows="6" readonly placeholder="Result will appear here..."></textarea>
                </div>
                <div id="fr-count" style="font-size: 0.85rem; color: var(--text-secondary); margin-top: 4px;"></div>
                <div id="fr-error" class="error" hidden></div>
            </div>
        </div>

        <!-- Regex Tester -->
        <div id="tab-regex" class="pdf-section card">
            <div class="card-body">
                <h2>Regex Tester</h2>
                <p class="meta">Test regular expressions against text with live match highlighting.</p>

                <div class="field-row" style="margin-top: 16px; gap: 8px; flex-wrap: wrap;">
                    <div class="field" style="flex: 3; min-width: 200px;">
                        <label>Pattern</label>
                        <input type="text" id="rx-pattern" placeholder="e.g. \b\w+@\w+\.\w+\b" oninput="doRegex()">
                    </div>
                    <div class="field" style="flex: 1; min-width: 80px;">
                        <label>Flags</label>
                        <input type="text" id="rx-flags" value="g" placeholder="g, i, m" oninput="doRegex()">
                    </div>
                </div>

                <div class="field" style="margin-top: 12px;">
                    <label>Test string</label>
                    <textarea id="rx-input" class="convert-textarea" rows="6" placeholder="Paste text to test against..." oninput="doRegex()"></textarea>
                </div>

                <div id="rx-highlighted" class="convert-textarea" style="margin-top: 12px; min-height: 80px; white-space: pre-wrap; word-break: break-word; font-family: monospace; font-size: 0.875rem; display: none;"></div>

                <div id="rx-matches" style="margin-top: 12px;"></div>
                <div id="rx-error" class="error" hidden></div>
            </div>
        </div>

        <!-- Base64 -->
        <div id="tab-base64" class="pdf-section card">
            <div class="card-body">
                <h2>Base64</h2>
                <p class="meta">Encode or decode text and files as Base64.</p>

                <div class="field" style="margin-top: 16px;">
                    <label>Input</label>
                    <textarea id="b64-input" class="convert-textarea" rows="5" placeholder="Paste text or Base64 string..."></textarea>
                </div>

                <div class="pdf-actions" style="margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap;">
                    <button class="btn-download" onclick="doB64Encode()">Encode</button>
                    <button class="btn-download btn-secondary" onclick="doB64Decode()">Decode</button>
                    <label class="btn-download btn-secondary" style="cursor: pointer;">
                        Encode File<input type="file" id="b64-file-input" hidden onchange="doB64File()">
                    </label>
                </div>

                <div class="field" style="margin-top: 12px;">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
                        <label>Output</label>
                        <button class="btn-copy" onclick="copyText('b64-output', 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>
                    </div>
                    <textarea id="b64-output" class="convert-textarea" rows="5" readonly placeholder="Result will appear here..."></textarea>
                </div>
                <div id="b64-error" class="error" hidden></div>
            </div>
        </div>

        <!-- Hash Generator -->
        <div id="tab-hash" class="pdf-section card">
            <div class="card-body">
                <h2>Hash Generator</h2>
                <p class="meta">Generate cryptographic hashes of text using the browser's Web Crypto API.</p>

                <div class="field" style="margin-top: 16px;">
                    <label>Input text</label>
                    <textarea id="hash-input" class="convert-textarea" rows="4" placeholder="Enter text to hash..."></textarea>
                </div>

                <div style="margin-top: 12px; display: flex; gap: 16px; flex-wrap: wrap;">
                    <label class="check-label"><input type="checkbox" class="hash-algo" value="SHA-1" checked> SHA-1</label>
                    <label class="check-label"><input type="checkbox" class="hash-algo" value="SHA-256" checked> SHA-256</label>
                    <label class="check-label"><input type="checkbox" class="hash-algo" value="SHA-512"> SHA-512</label>
                </div>

                <div class="pdf-actions" style="margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap;">
                    <button class="btn-download" onclick="doHash()">
                        <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>
                        Hash Text
                    </button>
                    <label class="btn-download btn-secondary" style="cursor: pointer;">
                        Hash File<input type="file" id="hash-file-input" hidden onchange="doHashFile()">
                    </label>
                </div>

                <div id="hash-results" style="margin-top: 16px;"></div>
                <div id="hash-error" class="error" hidden></div>
            </div>
        </div>

        <!-- Text Diff -->
        <div id="tab-diff" class="pdf-section card">
            <div class="card-body">
                <h2>Text Diff</h2>
                <p class="meta">Compare two blocks of text and highlight line-by-line differences.</p>

                <div class="field-row" style="margin-top: 16px; gap: 12px;">
                    <div class="field" style="flex: 1;">
                        <label>Original</label>
                        <textarea id="diff-original" class="convert-textarea" rows="8" placeholder="Paste original text..."></textarea>
                    </div>
                    <div class="field" style="flex: 1;">
                        <label>Modified</label>
                        <textarea id="diff-modified" class="convert-textarea" rows="8" placeholder="Paste modified text..."></textarea>
                    </div>
                </div>

                <div class="pdf-actions" style="margin-top: 12px;">
                    <button class="btn-download" onclick="doDiff()">
                        <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>
                        Compare
                    </button>
                </div>

                <div id="diff-output" style="margin-top: 16px; font-family: monospace; font-size: 0.875rem; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; display: none;"></div>
                <div id="diff-summary" style="margin-top: 8px; font-size: 0.85rem; color: var(--text-secondary);"></div>
            </div>
        </div>

        <!-- Color Converter -->
        <div id="tab-color" class="pdf-section card">
            <div class="card-body">
                <h2>Color Converter</h2>
                <p class="meta">Convert between HEX, RGB, and HSL color formats with a live preview.</p>

                <div style="margin-top: 24px; display: flex; gap: 32px; flex-wrap: wrap; align-items: flex-start; justify-content: center;">
                    <div id="color-swatch" style="width: 80px; height: 80px; border-radius: 12px; border: 1px solid var(--border); background: #3b82f6; flex-shrink: 0;"></div>

                    <div style="flex: 1; min-width: 240px;">
                        <div class="field" style="margin-bottom: 12px;">
                            <label>HEX</label>
                            <input type="text" id="color-hex" value="#3b82f6" placeholder="#000000" oninput="colorFromHex()" style="font-family: monospace;">
                        </div>

                        <div class="field-row" style="gap: 8px; margin-bottom: 12px;">
                            <div class="field">
                                <label>R</label>
                                <input type="number" id="color-r" min="0" max="255" value="59" oninput="colorFromRgb()">
                            </div>
                            <div class="field">
                                <label>G</label>
                                <input type="number" id="color-g" min="0" max="255" value="130" oninput="colorFromRgb()">
                            </div>
                            <div class="field">
                                <label>B</label>
                                <input type="number" id="color-b" min="0" max="255" value="246" oninput="colorFromRgb()">
                            </div>
                        </div>

                        <div class="field-row" style="gap: 8px;">
                            <div class="field">
                                <label>H (0-360)</label>
                                <input type="number" id="color-h" min="0" max="360" value="217" oninput="colorFromHsl()">
                            </div>
                            <div class="field">
                                <label>S (%)</label>
                                <input type="number" id="color-s" min="0" max="100" value="91" oninput="colorFromHsl()">
                            </div>
                            <div class="field">
                                <label>L (%)</label>
                                <input type="number" id="color-l" min="0" max="100" value="60" oninput="colorFromHsl()">
                            </div>
                        </div>
                    </div>
                </div>

                <div id="color-display" style="margin-top: 20px; font-family: monospace; font-size: 0.9rem; display: flex; gap: 24px; flex-wrap: wrap; color: var(--text-secondary); justify-content: center;">
                    <span id="color-hex-display"></span>
                    <span id="color-rgb-display"></span>
                    <span id="color-hsl-display"></span>
                </div>
            </div>
        </div>
        <!-- URL Encoder/Decoder -->
        <div id="tab-urlencode" class="pdf-section card">
            <div class="card-body">
                <h2>URL Encoder / Decoder</h2>
                <p class="meta">Encode or decode URL components.</p>

                <div class="field" style="margin-top: 16px;">
                    <label>Input</label>
                    <textarea id="url-input" class="convert-textarea" rows="4" placeholder="Paste text or encoded URL..."></textarea>
                </div>

                <div class="pdf-actions" style="margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap;">
                    <button class="btn-download" onclick="doUrlEncode()">Encode</button>
                    <button class="btn-download btn-secondary" onclick="doUrlDecode()">Decode</button>
                </div>

                <div class="field" style="margin-top: 12px;">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
                        <label>Output</label>
                        <button class="btn-copy" onclick="copyText('url-output', 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>
                    </div>
                    <textarea id="url-output" class="convert-textarea" rows="4" readonly placeholder="Result will appear here..."></textarea>
                </div>
                <div id="url-error" class="error" hidden></div>
            </div>
        </div>

        <!-- JSON Formatter -->
        <div id="tab-json" class="pdf-section card">
            <div class="card-body">
                <h2>JSON Formatter</h2>
                <p class="meta">Format, validate, and minify JSON.</p>

                <div class="field" style="margin-top: 16px;">
                    <label>Input JSON</label>
                    <textarea id="json-input" class="convert-textarea" rows="8" placeholder='{"key": "value", "array": [1,2,3]}' style="font-family: ui-monospace, monospace;"></textarea>
                </div>

                <div class="pdf-actions" style="margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap;">
                    <button class="btn-download" onclick="doJsonFormat()">Format</button>
                    <button class="btn-download btn-secondary" onclick="doJsonMinify()">Minify</button>
                </div>

                <div class="field" style="margin-top: 12px;">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
                        <label>Output</label>
                        <button class="btn-copy" onclick="copyText('json-output', 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>
                    </div>
                    <textarea id="json-output" class="convert-textarea" rows="8" readonly style="font-family: ui-monospace, monospace;"></textarea>
                </div>
                <div id="json-error" class="error" hidden></div>
            </div>
        </div>

        <!-- JWT Decoder -->
        <div id="tab-jwt" class="pdf-section card">
            <div class="card-body">
                <h2>JWT Decoder</h2>
                <p class="meta">Decode a JSON Web Token to inspect its header and payload.</p>

                <div class="field" style="margin-top: 16px;">
                    <label>JWT Token</label>
                    <textarea id="jwt-input" class="convert-textarea" rows="4" placeholder="eyJhbGciOiJIUzI1NiIs..." style="font-family: ui-monospace, monospace;"></textarea>
                </div>

                <div class="pdf-actions" style="margin-top: 12px;">
                    <button class="btn-download" onclick="doJwtDecode()">Decode</button>
                </div>

                <div id="jwt-results" style="margin-top: 16px;"></div>
                <div id="jwt-error" class="error" hidden></div>
            </div>
        </div>

        <!-- Case Converter -->
        <div id="tab-case" class="pdf-section card">
            <div class="card-body">
                <h2>Case Converter</h2>
                <p class="meta">Convert text between different cases.</p>

                <div class="field" style="margin-top: 16px;">
                    <label>Input</label>
                    <textarea id="case-input" class="convert-textarea" rows="4" placeholder="Enter text to convert..."></textarea>
                </div>

                <div style="margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap;">
                    <button class="pill" onclick="doCase('upper')">UPPER</button>
                    <button class="pill" onclick="doCase('lower')">lower</button>
                    <button class="pill" onclick="doCase('title')">Title Case</button>
                    <button class="pill" onclick="doCase('camel')">camelCase</button>
                    <button class="pill" onclick="doCase('snake')">snake_case</button>
                    <button class="pill" onclick="doCase('kebab')">kebab-case</button>
                </div>

                <div class="field" style="margin-top: 12px;">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
                        <label>Output</label>
                        <button class="btn-copy" onclick="copyText('case-output', 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>
                    </div>
                    <textarea id="case-output" class="convert-textarea" rows="4" readonly></textarea>
                </div>
            </div>
        </div>

        <!-- UUID Generator -->
        <div id="tab-uuid" class="pdf-section card">
            <div class="card-body">
                <h2>UUID Generator</h2>
                <p class="meta">Generate random UUIDs (v4).</p>

                <div style="margin-top: 16px; display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end;">
                    <div class="field" style="width: 120px;">
                        <label>Count</label>
                        <input type="number" id="uuid-count" value="1" min="1" max="100">
                    </div>
                    <button class="btn-download" onclick="doUuid()" style="height: 42px; padding: 0 24px; width: auto;">Generate</button>
                </div>

                <div class="field" style="margin-top: 12px;">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
                        <label>UUIDs</label>
                        <button class="btn-copy" onclick="copyText('uuid-output', 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>
                    </div>
                    <textarea id="uuid-output" class="convert-textarea" rows="6" readonly style="font-family: ui-monospace, monospace;"></textarea>
                </div>
            </div>
        </div>

        <!-- Unix Timestamp -->
        <div id="tab-timestamp" class="pdf-section card">
            <div class="card-body">
                <h2>Unix Timestamp Converter</h2>
                <p class="meta">Convert between Unix timestamps and human-readable dates.</p>

                <div style="margin-top: 16px; display: flex; gap: 16px; flex-wrap: wrap;">
                    <div style="flex: 1; min-width: 240px;">
                        <div class="field">
                            <label>Unix Timestamp</label>
                            <input type="text" id="ts-unix" placeholder="e.g. 1700000000" oninput="tsFromUnix()">
                        </div>
                        <div id="ts-date-display" style="margin-top: 8px; font-size: .85rem; color: var(--text-secondary);"></div>
                    </div>
                    <div style="flex: 1; min-width: 240px;">
                        <div class="field">
                            <label>Date/Time</label>
                            <input type="datetime-local" id="ts-datetime" oninput="tsFromDatetime()" step="1">
                        </div>
                        <div id="ts-unix-display" style="margin-top: 8px; font-size: .85rem; color: var(--text-secondary); font-family: ui-monospace, monospace;"></div>
                    </div>
                </div>

                <div style="margin-top: 12px;">
                    <button class="pill active" onclick="tsNow()">Now</button>
                </div>
            </div>
        </div>

        <!-- Lorem Ipsum -->
        <div id="tab-lorem" class="pdf-section card">
            <div class="card-body">
                <h2>Lorem Ipsum Generator</h2>
                <p class="meta">Generate placeholder text.</p>

                <div style="margin-top: 16px; display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end;">
                    <div class="field" style="width: 120px;">
                        <label>Paragraphs</label>
                        <input type="number" id="lorem-count" value="3" min="1" max="20">
                    </div>
                    <button class="btn-download" onclick="doLorem()" style="height: 42px; padding: 0 24px; width: auto;">Generate</button>
                </div>

                <div class="field" style="margin-top: 12px;">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
                        <label>Output</label>
                        <button class="btn-copy" onclick="copyText('lorem-output', 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>
                    </div>
                    <textarea id="lorem-output" class="convert-textarea" rows="8" readonly></textarea>
                </div>
            </div>
        </div>

        <!-- Password Generator -->
        <div id="tab-password" class="pdf-section card">
            <div class="card-body">
                <h2>Password Generator</h2>
                <p class="meta">Generate secure random passwords with customizable options.</p>

                <div style="margin-top: 16px; display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end;">
                    <div class="field" style="width: 120px;">
                        <label>Length</label>
                        <input type="number" id="pw-length" value="20" min="4" max="128">
                    </div>
                    <button class="btn-download" onclick="doPassword()" style="height: 42px; padding: 0 24px; width: auto;">Generate</button>
                </div>

                <div style="margin-top: 12px; display: flex; gap: 16px; flex-wrap: wrap;">
                    <label class="check-label"><input type="checkbox" id="pw-upper" checked> Uppercase (A-Z)</label>
                    <label class="check-label"><input type="checkbox" id="pw-lower" checked> Lowercase (a-z)</label>
                    <label class="check-label"><input type="checkbox" id="pw-digits" checked> Digits (0-9)</label>
                    <label class="check-label"><input type="checkbox" id="pw-symbols" checked> Symbols (!@#$...)</label>
                </div>

                <div class="field" style="margin-top: 16px;">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
                        <label>Password</label>
                        <button class="btn-copy" onclick="copyText('pw-output', 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>
                    </div>
                    <input type="text" id="pw-output" readonly style="font-family: ui-monospace, monospace; font-size: 1.1rem; letter-spacing: .05em; padding: 14px;">
                </div>

                <div id="pw-strength" style="margin-top: 8px; font-size: .82rem; color: var(--text-secondary);"></div>
                <div class="pw-strength-bar"><div class="pw-strength-fill" id="pw-strength-fill"></div></div>
            </div>
        </div>

    </main>
{% endblock %}

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