<!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">

</th:block>

<th:block layout:fragment="content" id="content">
    <section class="wrapper style2">
        <div class="container" sec:authorize="isAuthenticated()">
            <header class="major"
                    th:with="isAdmin=${#authorization.expression('hasRole(''ADMIN'')')}, isWriter=${#authentication.name == srcPost.writer}"
                    th:attr="
                    onclick=${(isAdmin or isWriter) ? 'loadEditor()' : ''},
                    style=${(isAdmin or isWriter) ? 'cursor: pointer;' : ''},
                    title=${(isAdmin or isWriter) ? '클릭하여 수정하기' : ''}
                 ">
                <h2 id="title_layer">
                    <span th:text="${srcPost.title}">게시물 제목이 여기에 표시됩니다</span>
                    <span style="font-size: 0.8em; color: #888; font-weight: normal; margin-left: 0.5em;">
                        (읽음: <span th:text="${srcPost.readCount}">0</span>)
                    </span>
                </h2>
                <p>
                    <span th:if="${srcPost.writer != null}" th:text="${'by ' + srcPost.writer + ' | '}" style="font-weight: 600;"></span>
                    <span th:text="${#temporals.format(T(java.time.Instant).ofEpochMilli(srcPost.writeTime).atZone(T(java.time.ZoneId).systemDefault()).toLocalDateTime(), 'yyyy-MM-dd HH:mm:ss')}"></span>
                </p>
            </header>

            <div class="write_controllbox" style="margin-top: -1em; margin-bottom: 2em;">
                <div class="write_option controlbox-category">
                </div>
                <div class="write_option controlbox-hashtag" id="hashtag_field">
                </div>
                <div class="write_option controlbox-location" id="location_field">
                </div>
            </div>
        </div>

        <div class="container" sec:authorize="isAnonymous()">
            <header class="major open-login-popup" to="#loginPopup" style="cursor: pointer;">
                <h2 id="title_layer_anon">
                    <span th:text="${srcPost.title}">게시물 제목이 여기에 표시됩니다</span>
                    <span style="font-size: 0.8em; color: #888; font-weight: normal; margin-left: 0.5em;">
                        (읽음: <span th:text="${srcPost.readCount}">0</span>)
                    </span>
                </h2>
                <p>
                    <span th:if="${srcPost.writer != null}" th:text="${'by ' + srcPost.writer + ' | '}" style="font-weight: 600;"></span>
                    <span th:text="${#temporals.format(T(java.time.Instant).ofEpochMilli(srcPost.writeTime).atZone(T(java.time.ZoneId).systemDefault()).toLocalDateTime(), 'yyyy-MM-dd HH:mm:ss')}"></span>
                </p>
            </header>

            <div class="write_controllbox" style="margin-top: -1em; margin-bottom: 2em;">
                <div class="write_option controlbox-category">
                </div>
                <div class="write_option controlbox-hashtag" id="hashtag_field_anon">
                </div>
                <div class="write_option controlbox-location" id="location_field_anon">
                </div>
            </div>
        </div>
    </section>

    <section class="wrapper style1">
        <div class="container">
            <div id="content_inner">
                <article>
                    <div id="editor"></div>

                    <div class="vote-controls" style="margin-top: 2em; text-align: center; border-top: 1px solid #e0e0e0; padding-top: 2em;" th:data-post-id="${srcPost.id}">
                        <button class="button" onclick="handleVote(this, 'like')">
                            👍 Like (<span class="like-count" th:text="${srcPost.voteCount}">0</span>)
                        </button>
                        <button class="button" onclick="handleVote(this, 'unlike')">
                            👎 Unlike (<span class="unlike-count" th:text="${srcPost.unlikeCount}">0</span>)
                        </button>
                    </div>

                    <h3 id="write" th:text="${srcPost.firstAddress}"></h3>
                    <h3 id="modify" th:text="${srcPost.modifyAddress}"></h3>
                </article>

                <section class="comment-section">
                    <h2>Comments</h2>
                    <div id="comment-form-container">
                        <div id="reply-status-bar" style="display: none;">
                            <span id="reply-status-text"></span>
                            <button id="btn-cancel-reply" onclick="cancelReply()">X 취소</button>
                        </div>
                        <textarea id="comment-input" placeholder="댓글을 입력하세요..."></textarea>
                        <button id="submit-comment" class="button">등록</button>
                    </div>
                    <div id="comments-list">
                    </div>
                </section>
            </div>
        </div>
    </section>

    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.js" defer></script>
    <link href="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.snow.css" rel="stylesheet" />
    <!--    <script src="https://unpkg.com/quill-image-resize@3.0.9/image-resize.min.js" defer></script>-->
    <!--    <script th:src="@{/js/image-resize.min.js}"></script>-->
    <script src="https://cdn.jsdelivr.net/gh/scrapooo/quill-resize-module@1.0.2/dist/quill-resize-module.js"></script>

    <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" defer></script>
    <!--    <script src="https://cdn.jsdelivr.net/npm/quill-image-resize-module@3.0.0/image-resize.min.js"></script>-->
<!--    <script defer>document.addEventListener('DOMContentLoaded', function() {initEditor(true)});</script>-->
    <script defer>document.addEventListener('DOMContentLoaded', function() {
        initEditor(false)
        fetchComments(serverData.id);
    });</script>
</th:block>
</html>