go_blog/templates/user/my_article_form.html

{{define "my_article_form"}}
{{template "header" .}}
{{template "markdown_assets" .}}
<section class="max-w-4xl mx-auto px-4 py-12">
    <div class="mb-8">
        <h2 class="text-3xl font-bold text-gray-900">{{.FormTitleText}}</h2>
    </div>

    <div id="myArticleError" class="mb-6 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg {{if not .Error}}hidden{{end}}">
        {{.Error}}
    </div>

    <form id="myArticleForm" action="{{.FormAction}}" method="post" class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 space-y-6">
        <input type="hidden" name="_csrf" value="{{.CSRFToken}}">
        {{if .SessionToken}}
        <input type="hidden" name="session_token" value="{{.SessionToken}}">
        {{end}}

        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">{{index .Tr "article_field_title"}}</label>
            <input type="text" name="title" value="{{.FormTitle}}" required
                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">{{index .Tr "article_field_slug"}}</label>
            <input type="text" name="slug" value="{{.FormSlug}}"
                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
            <p class="mt-1 text-sm text-gray-500">{{index .Tr "article_slug_help"}}</p>
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">{{index .Tr "article_field_summary"}}</label>
            <textarea name="summary" rows="3"
                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">{{.FormSummary}}</textarea>
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">{{index .Tr "article_field_content"}}</label>
            <textarea id="content" name="content" rows="20"
                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">{{.FormContent}}</textarea>
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">{{index .Tr "article_field_cover"}}</label>
            <input type="text" name="cover" value="{{.FormCover}}"
                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
            <p class="mt-1 text-sm text-gray-500">{{index .Tr "article_cover_help"}}</p>
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">{{index .Tr "article_published_at"}}</label>
            <input type="datetime-local" name="published_at" value="{{.FormPublishedAt}}"
                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
            <p class="mt-1 text-sm text-gray-500">{{index .Tr "article_published_at_hint"}}</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">{{index .Tr "article_field_status"}}</label>
                <select name="status"
                    class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    <option value="0" {{if eq .FormStatus "0"}}selected{{end}}>{{index .Tr "article_draft"}}</option>
                    <option value="1" {{if eq .FormStatus "1"}}selected{{end}}>{{index .Tr "article_published"}}</option>
                </select>
            </div>
        </div>

        <div class="flex gap-3">
            <button type="submit"
                class="bg-blue-600 text-white px-6 py-2 rounded-lg font-medium hover:bg-blue-700 transition-colors">
                {{index .Tr "article_save"}}
            </button>
            <a href="/my/articles"
                class="bg-gray-200 text-gray-700 px-6 py-2 rounded-lg font-medium hover:bg-gray-300 transition-colors">
                {{index .Tr "article_cancel"}}
            </a>
        </div>
    </form>
</section>

<script>
var myEasyMDE = null;
document.addEventListener('DOMContentLoaded', function() {
    myEasyMDE = new EasyMDE({
        element: document.getElementById('content'),
        spellChecker: false,
        status: false,
        previewRender: function (plainText, preview) {
            return '<div class="md-body">' + BlogMD.render(plainText) + '</div>';
        },
        toolbar: ["bold", "italic", "heading", "|", "quote", "unordered-list", "ordered-list", "|",
                  "link", "image", "|", "preview", "side-by-side", "fullscreen", "|", "guide"]
    });
});

// ---- Form submit（JSON API） ----
(function () {
    var form = document.getElementById('myArticleForm');
    if (!form) return;
    var articleId = {{ if .FormArticleID }}{{ .FormArticleID }}{{ else }}0{{ end }};
    form.addEventListener('submit', function (e) {
        e.preventDefault();
        var btn = e.submitter || null;
        var ta = document.getElementById('content');
        if (ta && myEasyMDE) { ta.value = myEasyMDE.value(); }
        var method = articleId ? 'PUT' : 'POST';
        var url = articleId ? '/api/my/articles/' + articleId : '/api/my/articles';
        blogAPI(method, url, blogForm(form, btn)).then(function (r) {
            if (r.ok) { window.location.href = r.redirect || '/my/articles'; }
            else { blogShowError('myArticleError', r.error || 'Failed to save article.'); }
        });
    });
})();
</script>

{{template "footer" .}}
{{end}}