{% extends "base.html" %}
{% block title %}Markdown to Word - EveryTools{% endblock %}
{% block top_title %}Markdown to Word{% endblock %}

{% block content %}
<div class="client-tool">
    <div class="tool-header">
        <h1>Markdown to Word</h1>
        <p>Paste or type Markdown and export it as a Word (.docx) document</p>
    </div>

    <div class="tool-notes">
        <p><strong>Word styles applied:</strong> Heading 1–4, List Bullet, List Number, Intense Quote (for blockquotes), and inline runs for bold / italic / code.
        The output uses real Word styles, so your document's outline appears correctly in Word's navigation pane.</p>
        <p style="font-size:.9em;color:var(--muted)"><strong>No external dependencies.</strong> For images and complex layouts,
        consider <a href="/convert/md-to-pdf">Markdown to PDF</a> instead.</p>
    </div>

    <div style="display:flex;gap:.5rem;margin-bottom:.6rem;flex-wrap:wrap;align-items:center">
        <label>File name:
            <input type="text" id="file-name" value="document" style="width:180px">
        </label>
        <label style="margin-left:auto">
            <input type="file" id="md-upload" accept=".md,.markdown,.txt" style="display:none"
                onchange="loadFile(this.files[0])">
            <button type="button" class="btn btn-small" onclick="document.getElementById('md-upload').click()">
                <i class="bi bi-folder2-open"></i> Load .md file
            </button>
        </label>
        <button class="btn btn-primary" onclick="convertMD()">
            <i class="bi bi-file-word-fill"></i> Convert to DOCX
        </button>
    </div>

    <textarea id="md-input" placeholder="# My Document

Paste your **Markdown** here.

- Lists work
- *Emphasis* and **bold**
- [Links](https://example.com)
- `inline code`

```
code blocks too
```

> And blockquotes.
" style="min-height:400px;width:100%;font-family:ui-monospace,Menlo,Consolas,monospace"></textarea>

    <div id="md-status" style="margin-top:.6rem;font-size:.9rem"></div>
</div>
{% endblock %}

{% block scripts %}
<script>
function loadFile(f) {
    if (!f) return;
    const name = f.name.replace(/\.[^.]+$/, "");
    document.getElementById("file-name").value = name;
    const reader = new FileReader();
    reader.onload = e => { document.getElementById("md-input").value = e.target.result; };
    reader.readAsText(f);
}

async function convertMD() {
    const md = document.getElementById("md-input").value;
    const status = document.getElementById("md-status");
    if (!md.trim()) { status.textContent = "Enter some Markdown first."; return; }

    const fd = new FormData();
    fd.append("markdown", md);
    fd.append("file_name", document.getElementById("file-name").value || "document");

    status.textContent = "Generating DOCX...";
    try {
        const r = await fetch("/convert/md-to-docx", { method: "POST", body: fd });
        if (!r.ok) {
            const j = await r.json().catch(() => ({}));
            status.innerHTML = `<span style="color:var(--danger)"><i class="bi bi-x-circle"></i> ${j.error || "Conversion failed"}</span>`;
            return;
        }
        const blob = await r.blob();
        const url = URL.createObjectURL(blob);
        const a = document.createElement("a");
        a.href = url;
        a.download = (document.getElementById("file-name").value || "document") + ".docx";
        document.body.appendChild(a); a.click(); a.remove();
        setTimeout(() => URL.revokeObjectURL(url), 1000);
        status.innerHTML = '<span style="color:var(--success)"><i class="bi bi-check-circle"></i> DOCX downloaded</span>';
    } catch (e) {
        status.innerHTML = `<span style="color:var(--danger)">Network error: ${e.message}</span>`;
    }
}
</script>
{% endblock %}