<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{/web/layout/homeLayout}">
<th:block layout:fragment="layout_css">
    <link rel="stylesheet" href="/css/web/ContentsBbsUpd.css">
    <link rel="stylesheet" href="/css/web/grid.css?v1.1">
</th:block>
<th:block layout:fragment="layout_top_script">
    <script>
        let menuClass = "[[${param.menuClass}]]" == "" ? "" : "[[${param.menuClass}]]";

        let selectUseYn = "[[${selectUseYn}]]" == "" ? "N" : "[[${selectUseYn}]]";
        let updateUseYn = "[[${updateUseYn}]]" == "" ? "N" : "[[${updateUseYn}]]";

        let muWebPhotoDietId = "[[${param.muWebPhotoDietId }]]";
        let categorylist = "[[${param.categorylist}]]";
        let categoryno = "[[${param.categoryno}]]";
        let originalCategoryNo = "[[${param.categoryno}]]";

        const CDN_URL = "[[${@environment.getProperty('url.cdn')}]]";
    </script>
</th:block>
<th:block layout:fragment="layout_content">
    <!-- 센터쪽 -->
    <div class="center_box">
        <p class="page_title">전후 사진(다이어트)</p>

        <!-- 테이블 -->
        <div class="content_box">
            <div class="update-container">
                <!-- Left Panel: Data Forms -->
                <div class="left-panel">
                    <!-- Row 1: Category & Title -->
                    <div class="form-grid-row">
                        <div class="form-group" style="flex: 0 0 150px;">
                            <label>카테고리</label>
                            <select th:name="categorylist">
                                <option value="">선택하세요</option>
                                <option th:each="category : ${categorylist}" th:value="${category.categoryNo}"
                                    th:text="${category.categoryNm}"></option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>제목</label>
                            <input type="text" id="title" placeholder="제목을 입력해주세요." />
                        </div>
                    </div>

                    <!-- Row 2: Content (Summernote usually takes full width, so we wrap it here) -->
                    <div class="form-grid-row" style="display:block;">
                        <div class="form-group" style="width: 100%;">
                            <label style="display:block; margin-bottom:5px;">내용</label>
                            <input type="text" id="content" placeholder="내용을 입력해주세요." />
                        </div>
                    </div>

                    <!-- Row 3: Hashtag -->
                    <div class="form-grid-row">
                        <div class="form-group">
                            <label>해쉬태그</label>
                            <input type="text" id="hashtag" placeholder="해쉬태그를 입력해주세요." />
                        </div>
                    </div>

                    <!-- Bottom Buttons -->
                    <div class="bottom-actions">
                        <button class="registration_btn btnSave"
                            style="width: 80px; height: 36px; border-radius: 4px; background: #3985EA; color: white; display: inline-block;">수정</button>
                        <button class="cancel_btn btnCancle"
                            style="width: 80px; height: 36px; border-radius: 4px; display: inline-block; margin-left: 10px;">취소</button>
                    </div>
                </div>

                <!-- Right Panel: Images -->
                <div class="right-panel" style="display: flex; flex-direction: column;">
                    <div style="display: flex; gap: 20px;">
                        <!-- Before Image Section -->
                        <div class="panel-section">
                            <div class="top-label">
                                <span>Before 사진 첨부파일</span>
                                <div>
                                    <label for="before_file" class="file_btn" style="cursor: pointer;"><img
                                            src="/image/web/add.svg" alt="파일찾기"></label>
                                    <button id="before_delete_btn"
                                        style="border:none; background:none; cursor:pointer; margin-left:5px; font-size:12px; color:#999;">삭제</button>
                                </div>
                            </div>
                            <div class="img-preview-wrapper img_box" id="before_img_box"
                                style="width: 360px; height: 360px; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; overflow: hidden;">
                                <!-- Before img 미리보기 -->
                            </div>
                            <input type="file" id="before_file" accept="image/jpeg, image/jpg, image/png"
                                style="display: none;" multiple>
                        </div>

                        <!-- After Image Section -->
                        <div class="panel-section">
                            <div class="top-label">
                                <span>After 사진 첨부파일</span>
                                <div>
                                    <label for="after_file" class="file_btn" style="cursor: pointer;"><img
                                            src="/image/web/add.svg" alt="파일찾기"></label>
                                    <button id="after_delete_btn"
                                        style="border:none; background:none; cursor:pointer; margin-left:5px; font-size:12px; color:#999;">삭제</button>
                                </div>
                            </div>
                            <div class="img-preview-wrapper img_box" id="after_img_box"
                                style="width: 360px; height: 360px; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; overflow: hidden;">
                                <!-- After img 미리보기 -->
                            </div>
                            <input type="file" id="after_file" accept="image/jpeg, image/jpg, image/png"
                                style="display: none;" multiple>
                        </div>
                    </div>
                    <!-- Guide Section (moved outside right-panel to prevent breaking flex wrap) -->
                    <div class="photo_guide"
                        style="padding: 15px; margin-top: 20px; background: #f8f9fa; border-radius: 5px; font-size: 13px; color: #555; clear: both;">
                        <p style="font-weight: bold; margin-bottom: 8px;">※ 사진 첨부 가이드</p>
                        <ul style="list-style: disc; padding-left: 18px; line-height: 1.6;">
                            <li>권장 사이즈는 <strong>650 x 650 px</strong> (또는 1:1 비율) 입니다.</li>
                            <li>상단의 [+] 버튼을 눌러 사진을 첨부해 주세요. 이미지는 영역에 맞춰 빈틈없이 자동으로 예쁘게 채워집니다.</li>
                        </ul>
                    </div>
                </div>


            </div>
        </div>
    </div>
</th:block>
<th:block layout:fragment="layout_popup">
</th:block>
<th:block layout:fragment="layout_script">
    <script src="/js/web/webphotodiet/webPhotoDietUpdate.js"></script>
</th:block>

</html>