{% extends "admin/base.html" %}

{% block main_content %}
<section class="form-panel">
    <div class="table-head">
        <div>
            <h2>{{ editor.title }}</h2>
            <div class="table-note">当前源文件：<span class="mono">{{ editor.file_path }}</span></div>
        </div>
    </div>

    <form id="markdown-editor-form" class="form-grid">
        <div class="field field-wide">
            <label>Slug</label>
            <input value="{{ editor.slug }}" readonly>
        </div>
        <div class="field field-wide">
            <label>Markdown 文件内容</label>
            <textarea id="markdown-content" name="markdown" style="min-height: 65vh; font-family: var(--font-mono); line-height: 1.65;">{{ editor.markdown }}</textarea>
        </div>
        <div class="field field-wide">
            <div class="actions">
                <button type="submit" class="btn btn-primary">保存 Markdown</button>
            </div>
            <div class="field-hint" style="margin-top: 10px;">这里保存的是服务器上的原始 Markdown 文件。你也可以直接在服务器用编辑器打开这个路径修改。</div>
            <div id="notice" class="notice"></div>
        </div>
    </form>
</section>
{% endblock %}

{% block page_scripts %}
<script>
    const markdownForm = document.getElementById("markdown-editor-form");
    const markdownField = document.getElementById("markdown-content");
    const markdownNotice = document.getElementById("notice");
    const markdownSlug = "{{ editor.slug }}";

    function showMarkdownNotice(message, kind) {
        markdownNotice.textContent = message;
        markdownNotice.className = "notice show " + (kind === "success" ? "notice-success" : "notice-error");
    }

    markdownForm?.addEventListener("submit", async (event) => {
        event.preventDefault();

        try {
            const response = await fetch(`/api/posts/slug/${markdownSlug}/markdown`, {
                method: "PUT",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    markdown: markdownField.value
                })
            });

            if (!response.ok) {
                throw new Error(await response.text() || "save failed");
            }

            const payload = await response.json();
            markdownField.value = payload.markdown;
            showMarkdownNotice("Markdown 文件已保存并同步到数据库。", "success");
        } catch (error) {
            showMarkdownNotice("保存失败：" + (error?.message || "unknown error"), "error");
        }
    });
</script>
{% endblock %}