<!doctype html>
<html lang="ko"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{kr/iotdoor/boot/admin/layout/adminLayout}">
<body>
<div layout:fragment="content" class="space-y-6">
    <div class="flex flex-wrap items-center justify-between gap-3">
        <div>
            <h2 class="text-xl font-semibold text-gray-800"
                th:text="${form.portfolioIdntfNo != null and !#strings.isEmpty(form.portfolioIdntfNo) ? '포트폴리오 수정' : '포트폴리오 등록'}">포트폴리오 등록</h2>
            <p class="mt-1 text-sm text-gray-500">본문 이미지 중 하나를 대표 이미지로 지정해서 썸네일과 콘텐츠를 한 번에 관리합니다.</p>
        </div>
        <a class="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
           th:href="@{/mfuc/portfolio/list.do}">
            목록으로
        </a>
    </div>

    <section class="rounded-2xl border border-gray-200 bg-white">
        <div class="border-b border-gray-100 px-6 py-5">
            <h3 class="text-base font-medium text-gray-800">포트폴리오 편집기</h3>
            <p class="mt-1 text-sm text-gray-500">이미지를 업로드한 뒤 선택 상태에서 `대표 이미지 지정` 버튼을 누르면 썸네일로 사용됩니다.</p>
        </div>
        <div class="p-4 sm:p-6">
            <form id="portfolioForm"
                  method="post"
                  th:action="@{/mfuc/portfolio/save.do}"
                  th:object="${form}"
                  th:attr="data-csrf-header=${_csrf.headerName},
                           data-csrf-token=${_csrf.token},
                           data-current-thumbnail-url=${currentThumbnailUrl},
                           data-current-thumbnail-atch-file-idntf-no=*{thumbnailAtchFileIdntfNo},
                           data-current-thumbnail-file-sn=*{thumbnailFileSn}">
                <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}">
                <input type="hidden" th:field="*{portfolioIdntfNo}">
                <input type="hidden" th:field="*{thumbnailAtchFileIdntfNo}" id="thumbnailAtchFileIdntfNo">
                <input type="hidden" th:field="*{thumbnailFileSn}" id="thumbnailFileSn">
                <textarea hidden th:field="*{content}" id="content"></textarea>

                <div class="space-y-6">
                    <div>
                        <label class="mb-2 block text-sm font-medium text-gray-700" for="title">제목</label>
                        <input class="h-11 w-full rounded-lg border border-gray-300 bg-white px-4 text-sm text-gray-800 outline-none transition focus:border-brand-300 focus:ring-3 focus:ring-brand-500/10"
                               id="title"
                               th:field="*{title}"
                               placeholder="포트폴리오 제목을 입력해주세요.">
                        <div class="mt-2 text-sm text-error-600" th:if="${#fields.hasErrors('title')}" th:errors="*{title}">제목 오류</div>
                    </div>

                    <div>
                        <div class="mb-3 flex flex-wrap items-center justify-between gap-3">
                            <div>
                                <label class="block text-sm font-medium text-gray-700">본문 에디터</label>
                                <p class="mt-1 text-sm text-gray-500">본문 이미지는 업로드 즉시 삽입되며, 대표 이미지가 설정되면 에디터 안에서 마스크로 표시됩니다.</p>
                            </div>
                            <div class="rounded-xl bg-brand-25 px-4 py-3 text-sm text-brand-700">
                                대표 이미지는 반드시 본문 안에 있어야 합니다.
                            </div>
                        </div>

                        <div id="portfolioToolbar" class="iotdoor-editor-toolbar">
                            <button type="button" data-editor-action="paragraph">본문</button>
                            <button type="button" data-editor-action="heading" data-level="1">H1</button>
                            <button type="button" data-editor-action="heading" data-level="2">H2</button>
                            <button type="button" data-editor-action="heading" data-level="3">H3</button>
                            <button type="button" data-editor-action="bold">굵게</button>
                            <button type="button" data-editor-action="italic">기울임</button>
                            <button type="button" data-editor-action="strike">취소선</button>
                            <button type="button" data-editor-action="bulletList">목록</button>
                            <button type="button" data-editor-action="orderedList">번호</button>
                            <button type="button" data-editor-action="blockquote">인용</button>
                            <button type="button" data-editor-action="horizontalRule">구분선</button>
                            <button type="button" data-editor-action="undo">되돌리기</button>
                            <button type="button" data-editor-action="redo">다시하기</button>
                            <button type="button" data-editor-action="imageUpload">이미지 업로드</button>
                            <button type="button" data-editor-action="setRepresentative">대표 이미지 지정</button>
                        </div>

                        <div id="portfolioEditor" class="iotdoor-editor-surface"></div>
                        <input id="portfolioImageFile" type="file" accept="image/*" hidden>
                        <div class="mt-2 text-sm text-error-600" th:if="${#fields.hasErrors('content')}" th:errors="*{content}">내용 오류</div>
                        <div class="mt-2 text-sm text-error-600" th:if="${#fields.hasErrors('thumbnailAtchFileIdntfNo')}" th:errors="*{thumbnailAtchFileIdntfNo}">대표 이미지 오류</div>
                        <div class="mt-2 text-sm text-error-600" th:if="${#fields.hasGlobalErrors()}">
                            <span th:each="error : ${#fields.globalErrors()}" th:text="${error}">오류 메시지</span>
                        </div>
                    </div>

                    <div class="flex flex-wrap gap-3">
                        <button class="inline-flex items-center gap-2 rounded-lg bg-brand-500 px-4 py-2 text-sm font-medium text-white hover:bg-brand-600"
                                type="submit">
                            저장
                        </button>
                        <a class="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
                           th:href="@{/mfuc/portfolio/list.do}">
                            취소
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </section>
</div>

<th:block layout:fragment="pageScripts">
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            if (!window.IotdoorAdmin) {
                return;
            }

            window.IotdoorAdmin.initPortfolioEditor({
                formSelector: '#portfolioForm',
                editorSelector: '#portfolioEditor',
                toolbarSelector: '#portfolioToolbar',
                hiddenInputSelector: '#content',
                fileInputSelector: '#portfolioImageFile',
                representativeIdSelector: '#thumbnailAtchFileIdntfNo',
                representativeSnSelector: '#thumbnailFileSn',
                uploadUrl: '/mfuc/file/upload.do',
                uploadDirectory: 'portfolio/editor',
                uploadDescription: 'portfolio-editor-image'
            });
        });
    </script>
</th:block>
</body>
</html>
