<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>问答</title>
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/editormd/css/editormd.css}"/>
    <style>
        .nav-underline .nav-link {
            padding-top: .75rem;
            padding-bottom: .75rem;
            font-size: .875rem;
            color: #6c757d;
        }
    </style>
</head>
<body style="background: #f2f2f2;">

<!-- 导航栏 -->
<div th:replace="~{common/header::header(activeUrl='blog')}"></div>

<main role="main" class="container mt-3 p-3 bg-white rounded">
    <div class="row">
        <div class="col-md-12 blog-main">
            <div class="col-md-12 order-md-1">
                <h4 class="mb-3">编辑博客</h4>

                <form class="needs-validation" th:action="@{/blog/editor}" method="post">
                    <!-- 隐藏域 -->
                    <input type="hidden" name="bid" th:value="${blog.getBid()}">

                    <div class="row">
                        <div class="col-md-10 mb-3">
                            <label for="firstName">博客标题</label>
                            <input required th:value="${blog.getTitle()}" name="title" type="text" class="form-control" id="firstName">
                        </div>

                        <div class="col-md-2 mb-3">
                            <label for="country">标签</label>
                            <select name="categoryId" class="custom-select d-block w-100" id="country">
                                <option th:each="category:${categoryList}"
                                        th:selected="${blog.getCategoryId() == category.getId()}"
                                        th:value="${category.getId()}" th:text="${category.getCategory()}">
                                </option>
                            </select>
                        </div>

                        <div class="col-md-12 mb-3">
                            <p>博客详情</p>
                            <div id="blog-content">
                                <textarea required name="content" th:text="${blog.getContent()}" id="content" style="display:none;" rows="3" class="form-control"> </textarea>
                            </div>
                        </div>

                    </div>

                    <button class="btn btn-primary btn-lg btn-block" type="submit">提交修改</button>
                </form>
            </div>
        </div>
    </div>
</main>

<div th:replace="~{common/footer::footer}"></div>

<a class="to-top">返回顶部</a>
<script th:src="@{/js/jquery-3.5.1.min.js}"></script>
<script th:src="@{/bootstrap/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/js/toTop.js}"></script>

<script th:src="@{/editormd/editormd.js}"></script>
<script type="text/javascript">
    var testEditor;
    $(function() {
        testEditor = editormd("blog-content", {
            width : "100%",
            height : 500,
            syncScrolling : "single",
            path : "/editormd/lib/",
            saveHTMLToTextarea : true,    // 保存 HTML 到 Textarea
            // [TOCM]  [TOC] 自动生成目录
            tocDropdown   : false,
            tocStartLevel : 1,     // Parse beginning of H2, Default value 1
            emoji: true,
            tex : true,                   // 开启科学公式TeX语言支持，默认关闭
            flowChart : true,             // 开启流程图支持，默认关闭
            sequenceDiagram : true,       // 开启时序/序列图支持，默认关闭,
            //图片上传
            imageUpload : true,
            imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL : "/question/write/file/upload",
            onload : function() {
                console.log('onload', this);
            },
            /*指定需要显示的功能按钮*/
            toolbarIcons : function() {
                return ["undo","redo","|",
                    "bold","del","italic","quote","ucwords","uppercase","lowercase","|",
                    "list-ul","list-ol","hr","|",
                    "link","reference-link","image",
                    "code-block","table","datetime","emoji","html-entities","|",
                    "search","watch","preview","fullscreen"]
            },
            onfullscreen : function() {
                console.log("onfullscreen");
                document.getElementsByClassName("navbar")[0].style.display="none";
            },
            onfullscreenExit : function() {
                console.log("onfullscreenExit");
                document.getElementsByClassName("navbar")[0].style.display="";
            }
        });
    });
</script>

</body>
</html>