<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>[[#{askQuestion}]] - [[${configs.base.siteName}]]</title>
    <meta name="keywords" th:content="${configs.base.siteKeywords}">
    <meta name="description" th:content="${configs.base.siteDescription}">
    <link th:replace="|${theme}/fragment/common| :: css">
    <link th:replace="|${theme}/fragment/common| :: css_simplemde">
    <script th:replace="|${theme}/fragment/common| :: js"></script>
    <script th:replace="|${theme}/fragment/common| :: js_simplemde"></script>
    <style>
        .CodeMirror, .CodeMirror-scroll {
            min-height: 350px;
        }
    </style>
</head>
<body>
<div th:replace="|${theme}/fragment/show_error| :: show_error"></div>
<div th:replace="|${theme}/fragment/common| :: browser_upgrade"></div>
<header th:replace="|${theme}/fragment/common| :: header"></header>
<div class="container mt-2">
    <h1 class="h3" th:text="${editing?:false} ? #{editQuestion} : #{askQuestion}"></h1>
    <form class="mt-3" id="validForm" th:action="@{/api/questions(_method=${editing?:false} ? 'PUT' : 'POST')}" method="POST">
        <div class="form-group">
            <label class="sr-only" for="title" th:text="#{question.title}"></label>
            <input type="text" class="form-control" id="title" name="title" th:value="${question?.ext?.title}" th:placeholder="#{question.title}" maxlength="150" required autocomplete="off" />
        </div>
        <div class="form-group">
            <label class="sr-only" for="markdown" th:text="#{question.markdown}"></label>
            <textarea id="markdown" name="markdown" th:text="${question?.ext?.markdown}" class="d-none" autocomplete="off"></textarea>
            <script th:inline="javascript">
                var mde = new SimpleMDE({
                    element: document.getElementById("markdown"),
                    placeholder: /*[[#{question.markdown.placeholder}]]*/"",
                    forceSync: true,
                    tabSize: 4,
                    indentWithTabs: false,
                    hideIcons: ["guide", "heading"],
                    showIcons: ["code"],
                    status: false,
                    spellChecker: false,
                    autoDownloadFontAwesome: false
                });
                codemirrorPaste(mde.codemirror, /*[[@{/api/upload_image}]]*/ "/api/upload_image");
                mde.codemirror.on("keydown", function (instance, event) {
                    if (event.ctrlKey && event.keyCode === 13) {
                        event.preventDefault();
                        $("#validForm").submit();
                    }
                });
            </script>
        </div>
        <input type="hidden" name="id" th:value="${question?.id}">
        <button type="submit" class="btn btn-primary" th:text="#{submit}"></button>
    </form>
</div>
<footer th:replace="|${theme}/fragment/common| :: footer"></footer>
<script th:inline="javascript">
    $(function () {
        $("#title").focus();
        $("#validForm").validate({
            submitHandler: function (form) {
                request(form.action, {method: form.method, body: $(form).serializeJSON()}).then(function (data) {
                    if (data === null) return;
                    showSuccess();
                    var url = /*[[@{/questions/}]]*/'/questions/';
                    location.href = url + data.id;
                });
            }
        });
    })
</script>
<th:block th:replace="|${theme}/fragment/common| :: access_log" />
</body>
</html>