{% extends "base.html" %}

{% block title %}File Converter{% endblock %}
{% block nav_convert %}active{% endblock %}

{% block content %}
    <main>

        <!-- Markdown to HTML -->
        <div id="tab-md2html" class="pdf-section card active">
            <div class="card-body">
                <h2>Markdown to HTML</h2>
                <p class="meta">Upload a .md file or paste markdown text to convert to a styled HTML document.</p>

                <div class="drop-zone" id="md-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 .md file<input type="file" id="md-input" accept=".md,.markdown,.txt" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; or paste markdown below &middot; outputs a styled HTML file</p>
                </div>

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

                <div class="field" style="margin-top: 16px;">
                    <label>Or paste markdown here</label>
                    <textarea id="md-text" class="convert-textarea" placeholder="# Hello&#10;&#10;Write your **markdown** here..." rows="8"></textarea>
                </div>

                <div class="md-preview-header">
                    <span class="md-preview-label">Preview</span>
                </div>
                <div id="md-preview" class="md-preview" hidden></div>

                <div class="pdf-actions" style="margin-top: 16px; display:flex; gap:8px;">
                    <button id="md-preview-btn" class="btn-download" style="background: var(--surface-2); color: var(--text-secondary); box-shadow:none;" onclick="doMdPreview()">
                        Preview
                    </button>
                    <button id="md-btn" class="btn-download" onclick="doMdToHtml()">
                        <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 HTML
                    </button>
                </div>

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

        <!-- CSV to JSON -->
        <div id="tab-csv2json" class="pdf-section card">
            <div class="card-body">
                <h2>CSV to JSON</h2>
                <p class="meta">Upload a CSV file to convert it to JSON format.</p>

                <div class="drop-zone" id="csv-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 .csv file<input type="file" id="csv-input" accept=".csv" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; first row treated as headers &middot; outputs .json</p>
                </div>

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

                <div id="csv-actions" class="pdf-actions" hidden>
                    <button id="csv-btn" class="btn-download" onclick="doCsvToJson()">
                        <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 JSON
                    </button>
                </div>

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

        <!-- JSON to CSV -->
        <div id="tab-json2csv" class="pdf-section card">
            <div class="card-body">
                <h2>JSON to CSV</h2>
                <p class="meta">Upload a JSON file (array of objects) to convert it to CSV format.</p>

                <div class="drop-zone" id="json-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 .json file<input type="file" id="json-input" accept=".json" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; expects an array of objects &middot; outputs .csv</p>
                </div>

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

                <div id="json-actions" class="pdf-actions" hidden>
                    <button id="json-btn" class="btn-download" onclick="doJsonToCsv()">
                        <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 CSV
                    </button>
                </div>

                <div id="json-error" class="error" hidden></div>
            </div>
        </div>
        <!-- YAML to JSON -->
        <div id="tab-yaml2json" class="pdf-section card">
            <div class="card-body">
                <h2>YAML to JSON</h2>
                <p class="meta">Convert a YAML file to JSON format.</p>
                <div class="drop-zone" id="yaml-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 .yaml file<input type="file" id="yaml-input" accept=".yaml,.yml" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; outputs .json</p>
                </div>
                <div id="yaml-file-info" class="split-info" hidden>
                    <span id="yaml-file-name" class="split-name"></span>
                    <span id="yaml-file-size" class="file-size"></span>
                    <button class="split-remove" onclick="clearYamlFile()">&times;</button>
                </div>
                <div id="yaml-actions" class="pdf-actions" hidden>
                    <button id="yaml-btn" class="btn-download" onclick="doYamlToJson()">
                        <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 JSON
                    </button>
                </div>
                <div id="yaml-error" class="error" hidden></div>
            </div>
        </div>

        <!-- JSON to YAML -->
        <div id="tab-json2yaml" class="pdf-section card">
            <div class="card-body">
                <h2>JSON to YAML</h2>
                <p class="meta">Convert a JSON file to YAML format.</p>
                <div class="drop-zone" id="json2yaml-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 .json file<input type="file" id="json2yaml-input" accept=".json" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; outputs .yaml</p>
                </div>
                <div id="json2yaml-file-info" class="split-info" hidden>
                    <span id="json2yaml-file-name" class="split-name"></span>
                    <span id="json2yaml-file-size" class="file-size"></span>
                    <button class="split-remove" onclick="clearJson2YamlFile()">&times;</button>
                </div>
                <div id="json2yaml-actions" class="pdf-actions" hidden>
                    <button id="json2yaml-btn" class="btn-download" onclick="doJsonToYaml()">
                        <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 YAML
                    </button>
                </div>
                <div id="json2yaml-error" class="error" hidden></div>
            </div>
        </div>

        <!-- CSV ↔ TSV -->
        <div id="tab-csv2tsv" class="pdf-section card">
            <div class="card-body">
                <h2>CSV ↔ TSV</h2>
                <p class="meta">Convert between comma-separated and tab-separated formats.</p>
                <div class="pdf-tabs" style="margin-top:0; margin-bottom:16px;">
                    <button class="pdf-tab active" data-subtab="csvtotsv">CSV → TSV</button>
                    <button class="pdf-tab" data-subtab="tsvtocsv">TSV → CSV</button>
                </div>
                <!-- CSV → TSV -->
                <div id="subtab-csvtotsv" class="pdf-subsection active">
                    <div class="drop-zone" id="csv2tsv-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 .csv file<input type="file" id="csv2tsv-input" accept=".csv" hidden></label>
                        <p class="drop-hint">or drop a file here &middot; outputs .tsv</p>
                    </div>
                    <div id="csv2tsv-file-info" class="split-info" hidden>
                        <span id="csv2tsv-file-name" class="split-name"></span>
                        <span id="csv2tsv-file-size" class="file-size"></span>
                        <button class="split-remove" onclick="clearCsv2TsvFile()">&times;</button>
                    </div>
                    <div id="csv2tsv-actions" class="pdf-actions" hidden>
                        <button id="csv2tsv-btn" class="btn-download" onclick="doCsvToTsv()">
                            <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 TSV
                        </button>
                    </div>
                    <div id="csv2tsv-error" class="error" hidden></div>
                </div>
                <!-- TSV → CSV -->
                <div id="subtab-tsvtocsv" class="pdf-subsection" hidden>
                    <div class="drop-zone" id="tsv2csv-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 .tsv file<input type="file" id="tsv2csv-input" accept=".tsv,.txt" hidden></label>
                        <p class="drop-hint">or drop a file here &middot; outputs .csv</p>
                    </div>
                    <div id="tsv2csv-file-info" class="split-info" hidden>
                        <span id="tsv2csv-file-name" class="split-name"></span>
                        <span id="tsv2csv-file-size" class="file-size"></span>
                        <button class="split-remove" onclick="clearTsv2CsvFile()">&times;</button>
                    </div>
                    <div id="tsv2csv-actions" class="pdf-actions" hidden>
                        <button id="tsv2csv-btn" class="btn-download" onclick="doTsvToCsv()">
                            <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 CSV
                        </button>
                    </div>
                    <div id="tsv2csv-error" class="error" hidden></div>
                </div>
            </div>
        </div>

        <!-- XML to JSON -->
        <div id="tab-xml2json" class="pdf-section card">
            <div class="card-body">
                <h2>XML to JSON</h2>
                <p class="meta">Convert an XML file to JSON format.</p>
                <div class="drop-zone" id="xml-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 .xml file<input type="file" id="xml-input" accept=".xml" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; outputs .json</p>
                </div>
                <div id="xml-file-info" class="split-info" hidden>
                    <span id="xml-file-name" class="split-name"></span>
                    <span id="xml-file-size" class="file-size"></span>
                    <button class="split-remove" onclick="clearXmlFile()">&times;</button>
                </div>
                <div id="xml-actions" class="pdf-actions" hidden>
                    <button id="xml-btn" class="btn-download" onclick="doXmlToJson()">
                        <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 JSON
                    </button>
                </div>
                <div id="xml-error" class="error" hidden></div>
            </div>
        </div>

        <!-- Create ZIP -->
        <div id="tab-createzip" class="pdf-section card">
            <div class="card-body">
                <h2>Create ZIP Archive</h2>
                <p class="meta">Select multiple files to bundle them into a single ZIP archive.</p>

                <div class="drop-zone" id="createzip-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/>
                        <polyline points="17 8 12 3 7 8"/>
                        <line x1="12" y1="3" x2="12" y2="15"/>
                    </svg>
                    <label class="drop-browse">Select files<input type="file" id="createzip-input" multiple hidden></label>
                    <p class="drop-hint">or drop files here &middot; any file type &middot; batch supported</p>
                </div>

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

                <div id="createzip-actions" class="pdf-actions" hidden>
                    <button id="createzip-btn" class="btn-download" onclick="doCreateZip()">
                        <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>
                        Create ZIP
                    </button>
                </div>

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

        <!-- Extract ZIP -->
        <div id="tab-extractzip" class="pdf-section card">
            <div class="card-body">
                <h2>Extract ZIP Archive</h2>
                <p class="meta">Upload a ZIP file to extract its contents. Single files download directly; multiple files are re-zipped with flat names.</p>

                <div class="drop-zone" id="extractzip-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/>
                        <polyline points="7 10 12 15 17 10"/>
                        <line x1="12" y1="15" x2="12" y2="3"/>
                    </svg>
                    <label class="drop-browse">Select .zip file<input type="file" id="extractzip-input" accept=".zip" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; extracts all contents</p>
                </div>

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

                <div id="extractzip-actions" class="pdf-actions" hidden>
                    <button id="extractzip-btn" class="btn-download" onclick="doExtractZip()">
                        <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 ZIP
                    </button>
                </div>

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

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