<!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/blog.js}"></script>
    <link th:href="@{/css/blog.css}" rel="stylesheet" />
    <!-- Quill 스타일 시트 -->
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

    <!-- Quill 라이브러리 -->
    <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
    <!-- HTML 에디터 영역 -->
    <!--    <div id="editor-container" style="height: 300px;"></div>-->
    <!-- Quill 라이브러리 및 테마 -->
    <link href="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.snow.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.js"></script>
    <!-- 테이블 플러그인 CSS & JS -->
    <link href="https://cdn.jsdelivr.net/npm/quill-table-better@1/dist/quill-table-better.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/quill-table-better@1/dist/quill-table-better.js"></script>
    <script>document.addEventListener('DOMContentLoaded', function() {initEditor()});</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>
                        <div class="write_option" id="location_field" ></div>
                    </div>
                    <h3 id="write" th:text="${srcPost.firstAddress}"></h3>
                    <h3 id="modify" th:text="${srcPost.modifyAddress}"></h3>
                </article>
            </div>
        </div>
    </section>
</th:block>
</html>
