<!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">포트폴리오 관리</h2>
            <p class="mt-1 text-sm text-gray-500">대표 이미지, 작성자, 조회수, 공개 링크를 함께 관리합니다.</p>
        </div>
        <a 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"
           th:href="@{/mfuc/portfolio/form.do}">
            새 포트폴리오 등록
        </a>
    </div>

    <div class="rounded-xl border border-success-100 bg-success-50 px-4 py-3 text-sm text-success-700" th:if="${param.saved}">
        포트폴리오가 저장되었습니다.
    </div>
    <div class="rounded-xl border border-success-100 bg-success-50 px-4 py-3 text-sm text-success-700" th:if="${param.deleted}">
        포트폴리오가 삭제되었습니다.
    </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">
            <div th:if="${#lists.isEmpty(portfolioItems)}" class="rounded-xl bg-gray-50 px-4 py-6 text-sm text-gray-500">
                아직 등록된 포트폴리오가 없습니다.
            </div>
            <div th:unless="${#lists.isEmpty(portfolioItems)}" class="overflow-x-auto">
                <table class="min-w-full text-sm">
                    <thead>
                    <tr class="border-b border-gray-100 text-left text-gray-500">
                        <th class="px-3 py-3">대표이미지</th>
                        <th class="px-3 py-3">제목</th>
                        <th class="px-3 py-3">등록일시</th>
                        <th class="px-3 py-3">등록자</th>
                        <th class="px-3 py-3">조회수</th>
                        <th class="px-3 py-3">관리</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr class="border-b border-gray-100 align-top last:border-0"
                        th:each="item : ${portfolioItems}">
                        <td class="px-3 py-4" style="width: 160px;">
                            <img class="h-24 w-36 rounded-xl object-cover"
                                 th:src="${item.imageUrl}"
                                 th:alt="${item.title}">
                        </td>
                        <td class="px-3 py-4">
                            <div class="font-semibold text-gray-900" th:text="${item.title}">제목</div>
                            <div class="mt-2 text-sm leading-6 text-gray-500" th:text="${item.summary}">요약</div>
                            <a class="mt-3 inline-flex items-center gap-2 text-sm font-medium text-brand-500 hover:text-brand-600"
                               th:href="@{/portfolio/{portfolioId}(portfolioId=${item.portfolioIdntfNo})}"
                               target="_blank">
                                공개 페이지 보기
                            </a>
                        </td>
                        <td class="px-3 py-4 text-gray-500"
                            th:text="${#temporals.format(item.registeredAt, 'yyyy-MM-dd HH:mm')}">2026-04-17 09:00</td>
                        <td class="px-3 py-4 text-gray-500" th:text="${item.registeredByName}">관리자</td>
                        <td class="px-3 py-4 text-gray-500" th:text="${item.viewCount}">0</td>
                        <td class="px-3 py-4">
                            <div class="flex flex-col gap-2">
                                <a class="inline-flex items-center justify-center rounded-lg border border-brand-200 px-3 py-2 text-sm font-medium text-brand-600 hover:bg-brand-25"
                                   th:href="@{/mfuc/portfolio/form.do(portfolioIdntfNo=${item.portfolioIdntfNo})}">
                                    수정
                                </a>
                                <form method="post" th:action="@{/mfuc/portfolio/delete.do}">
                                    <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}">
                                    <input type="hidden" name="portfolioIdntfNo" th:value="${item.portfolioIdntfNo}">
                                    <button class="inline-flex w-full items-center justify-center rounded-lg border border-error-200 px-3 py-2 text-sm font-medium text-error-600 hover:bg-error-25"
                                            type="submit"
                                            onclick="return confirm('해당 포트폴리오를 삭제하시겠습니까?');">
                                        삭제
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </section>
</div>
</body>
</html>
