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

<body>
<th:block layout:fragment="content" id="content">


    <section class="wrapper style2" >
        <th:block sec:authorize="isAuthenticated()">
            <div class="container" >
                <header class="major">
                    <h2 th:text="${pageTitle}">글 작성/수정</h2>

                    <h3>
                        <label for="title_field">
                            <input id="title_field" th:value="${srcPost.title}" style="width:100%; max-width:100%; box-sizing:border-box; border:none; outline:none; text-align:center;">
                        </label>
                    </h3>

                    <p th:if="${srcPost.writeTime != null and srcPost.writeTime > 0}"
                       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 style="text-align: right; margin-bottom: 2em; display: flex; align-items: center; justify-content: flex-end;">
                    <span style="font-weight: bold; color: #555; margin-right: 10px;">게시물 공개</span>
                    <input type="checkbox" id="post-published-switch" name="posting" th:checked="${srcPost.posting}" class="custom-checkbox" />
                    <label for="post-published-switch" class="custom-label"></label>
                </div>
                <div class="write_controllbox" style="margin-top: -1em; margin-bottom: 2em;">
                    <div class="write_option btn-example controlbox-category" to="#popLayer1">
                    </div>
                    <div class="write_option btn-example controlbox-hashtag" to="#popLayer2" id="hashtag_field">
                    </div>
                    <div class="write_option btn-example controlbox-location" id="location_field"></div>
                </div>
                <div class="manual-input-section" style="margin-bottom: 2em; padding: 1.5em; border: 1px solid #ddd; border-radius: 4px; background-color: #f9f9f9;">
                    <h4 style="margin-bottom: 1em; font-size: 1.1em; color: #333;"><i class="icon solid fa-cog" style="margin-right: 0.5em;"></i>수동 설정</h4>
                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5em;">
                        <div>
                            <label for="manual_date" style="font-weight: bold; margin-bottom: 0.5em; display: block;">작성일</label>
                            <input type="datetime-local" id="manual_date" style="width:100%; box-sizing: border-box;">
                        </div>
                        <div>
                            <label for="manual_lat" style="font-weight: bold; margin-bottom: 0.5em; display: block;">위도 (Latitude)</label>
                            <input type="number" id="manual_lat" step="any" placeholder="예: 37.5665" style="width:100%; box-sizing: border-box;">
                        </div>
                        <div>
                            <label for="manual_lon" style="font-weight: bold; margin-bottom: 0.5em; display: block;">경도 (Longitude)</label>
                            <input type="number" id="manual_lon" step="any" placeholder="예: 126.9780" style="width:100%; box-sizing: border-box;">
                        </div>
                    </div>
                    <p style="font-size: 0.8em; color: #777; margin-top: 1em;">* 작성일이나 좌표를 직접 입력하면 자동으로 측정된 GPS 정보 대신 입력된 값이 저장됩니다.</p>
                </div>
            </div>
        </th:block>
    </section>

    <section class="wrapper style1">
        <th:block sec:authorize="isAnonymous()">
            <div class="container"><h1>권한이 없는 뎁쇼?!</h1></div>
        </th:block>

        <th:block sec:authorize="isAuthenticated()">
            <div class="container">
                <div id="editor"></div>
                <div style="display: flex; gap: 1em; margin-top: 1em;">
                    <button id="save" class="button fit primary" onclick="save()">저장하기</button>
                    <button id="delete" class="button fit alt"
                            th:attr="data-post-id=${srcPost.id}"
                            onclick="deleteCurrentPost(this)"
                            th:if="${srcPost.id != null}">삭제하기</button>
                </div>
            </div>
        </th:block>
    </section>
</th:block>
<th:block layout:fragment="popup_layer">
    <div id="popLayer1" class="pop_layer category-popup">
        <div class="pop_container">
            <div class="pop_conts">
                <h2>Categories</h2>

                <div class="tag-list-label">Selected:</div>
                <div id="selected-category-area" class="staging-area">
                </div>

                <div class="tag-list-label">Pre-loaded Categories:</div>
                <div id="category-list" class="tag-list"></div>

                <input type="text" id="category-input" placeholder="Add a new category" class="tag-input">
                <button id="add-category-btn" class="button">Add</button>

                <div class="btn_r">
                    <a href="#" id="apply-category-btn" class="button" style="margin-right: 0.5em;">Apply</a>
                    <a href="#" class="btn_layerClose">Close</a>
                </div>
            </div>
        </div>
    </div>

    <div id="popLayer2" class="pop_layer hashtag-popup">
        <div class="pop_container">
            <div class="pop_conts">
                <h2>Hashtags</h2>

                <div class="tag-list-label">Selected:</div>
                <div id="selected-hashtags-area" class="staging-area tag-list">
                </div>

                <div class="tag-list-label">Suggested Tags:</div>
                <div id="hashtag-list" class="tag-list"></div>

                <input type="text" id="hashtag-input" placeholder="Add a new hashtag" class="tag-input">
                <button id="add-hashtag-btn" class="button">Add</button>

                <div class="btn_r">
                    <a href="#" id="apply-hashtag-btn" class="button" style="margin-right: 0.5em;">Apply</a>
                    <a href="#" class="btn_layerClose">Close</a>
                </div>
            </div>
        </div>
    </div>
    <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>initEditor(true);</script>-->
</th:block>
</body>
</html>