<!DOCTYPE html>
<html
        xmlns:th="http://www.thymeleaf.org"
        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
        layout:decorate="~{layout/default_layout}"
>
<th:block layout:fragment="head">
    <script type="text/javascript" th:src="@{/js/toast-ui-view.js}"></script>
    <link th:href="@{/css/toast-ui-dark.css}" rel="stylesheet" />
    <script type="text/javascript" th:src="@{/js/blog.js}"></script>
    <link th:href="@{/css/blog.css}" rel="stylesheet" />
    <script th:inline="javascript">
        let editor
        let onChange = () => {console.log(editor.getMarkdown())}
        document.addEventListener("DOMContentLoaded", onLoaded);
        function onLoaded() {
            baseData.title = [[${srcPost.title}]];
            baseData.content = [[${srcPost.content}]];
            baseData.firstPostLon = [[${srcPost.firstPostLon}]];
            baseData.firstPostLat = [[${srcPost.firstPostLat}]];
            document.getElementById('location_field').textContent = "Lat: " + baseData.firstPostLat + ", Lon: " + baseData.firstPostLon;
            $('#title_layer').text(baseData.title)
            var h = document.querySelector('#main_layer').getBoundingClientRect().height * 0.7
            editor = new toastui.Editor({
                el: document.querySelector('#editor'),
                height: h+ 'px',
                width:'100%',
                viewer: true,
                usageStatistics : false,
                initialValue:baseData.content,
                theme:"dark",
            });
        }
    </script>
</th:block>
<th:block layout:fragment="content" id="content">
    <div id="main_layer">
        <label id="title_layer" class="write_option" ></label>
        <div id="editor" ></div>
        <div class="write_controllbox">
            <div class="write_option btn-example" to="#popLayer1" onclick="openPopup(this)"  ></div>
            <div style="width: 15px" ></div>
            <div class="write_option btn-example" to="#popLayer2" onclick="openPopup(this)" id="hashtag_field"></div>
            <div style="width: 15px" ></div>
            <label class="write_option" readonly id="location_field"></label>
        </div>
    </div>
</th:block>
</html>
