<!DOCTYPE html>
<html
        xmlns:th="http://www.thymeleaf.org"
        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
        xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
        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)

            editor = new toastui.Editor({
                el: document.querySelector('#editor'),
                height: '100%',
                width:'100%',
                viewer: true,
                usageStatistics : false,
                initialValue:baseData.content,
            });
        }
        function loadEditor() {
            goToEditor([[${srcPost.id}]]);
        }
    </script>
</th:block>
<th:block layout:fragment="content" id="content">
    <section class="wrapper style2">

        <div class="container" sec:authorize="isAuthenticated()" onclick="loadEditor()">
            <header class="major">
                <h2 id="title_layer" th:text="${srcPost.title}">A gigantic heading you can use for whatever</h2>
                <p th:text="${#temporals.format(T(java.time.Instant).ofEpochMilli(srcPost.writeTime).atZone(T(java.time.ZoneId).systemDefault()).toLocalDateTime(), 'yyyy-MM-dd HH:mm:ss')}"></p>
            </header>
        </div>
        <div class="container" sec:authorize="isAnonymous()" onclick="openLoginPopup('login')">
            <header class="major">
                <h2 id="title_layer" th:text="${srcPost.title}">A gigantic heading you can use for whatever</h2>
                <p th:text="${#temporals.format(T(java.time.Instant).ofEpochMilli(srcPost.writeTime).atZone(T(java.time.ZoneId).systemDefault()).toLocalDateTime(), 'yyyy-MM-dd HH:mm:ss')}"></p>
            </header>
        </div>
    </section>
    <section class="wrapper style1">
        <div class="container">
            <div id="content">
                <article>
                    <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>
                    <h3 id="write" th:text="${srcPost.firstAddress}"></h3>
                    <h3 id="modify" th:text="${srcPost.modifyAddress}"></h3>
                </article>
            </div>
        </div>
    </section>
</th:block>
</html>
