<!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="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
        <div class="rounded-2xl border border-gray-200 bg-white p-5">
            <p class="text-sm text-gray-500">활성 사용자</p>
            <h3 class="mt-3 text-3xl font-semibold text-gray-900" th:text="${activeUserCount}">0</h3>
            <p class="mt-2 text-sm text-gray-500">현재 사용 가능한 사용자 계정 수입니다.</p>
        </div>
        <div class="rounded-2xl border border-gray-200 bg-white p-5">
            <p class="text-sm text-gray-500">관리자 계정</p>
            <h3 class="mt-3 text-3xl font-semibold text-gray-900" th:text="${adminUserCount}">0</h3>
            <p class="mt-2 text-sm text-gray-500">`ADM` 유형으로 등록된 계정 수입니다.</p>
        </div>
        <div class="rounded-2xl border border-gray-200 bg-white p-5">
            <p class="text-sm text-gray-500">포트폴리오</p>
            <h3 class="mt-3 text-3xl font-semibold text-gray-900" th:text="${portfolioCount}">0</h3>
            <p class="mt-2 text-sm text-gray-500">공개 중인 포트폴리오 문서 수입니다.</p>
        </div>
        <div class="rounded-2xl border border-gray-200 bg-white p-5">
            <p class="text-sm text-gray-500">문의 접수</p>
            <h3 class="mt-3 text-3xl font-semibold text-gray-900" th:text="${contactCount}">0</h3>
            <p class="mt-2 text-sm text-gray-500">홈페이지에서 접수된 전체 문의 수입니다.</p>
        </div>
    </div>

    <div class="grid gap-6 xl:grid-cols-[1.1fr_0.9fr]">
        <section class="rounded-2xl border border-gray-200 bg-white">
            <div class="flex items-center justify-between gap-3 px-6 py-5">
                <div>
                    <h2 class="text-base font-medium text-gray-800">최근 문의</h2>
                    <p class="mt-1 text-sm text-gray-500">최근 접수된 문의 10건을 바로 확인할 수 있습니다.</p>
                </div>
                <a class="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
                   th:href="@{/mfuc/contact/list.do}">
                    전체 보기
                </a>
            </div>
            <div class="border-t border-gray-100 p-4 sm:p-6">
                <div th:if="${#lists.isEmpty(recentContacts)}" class="rounded-xl bg-gray-50 px-4 py-6 text-sm text-gray-500">
                    아직 접수된 문의가 없습니다.
                </div>
                <div th:unless="${#lists.isEmpty(recentContacts)}" class="space-y-4">
                    <article class="rounded-2xl border border-gray-100 bg-gray-50 px-4 py-4"
                             th:each="contact : ${recentContacts}">
                        <div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
                            <div>
                                <h3 class="text-base font-semibold text-gray-900" th:text="${contact.subject}">문의 제목</h3>
                                <p class="mt-1 text-sm text-gray-500">
                                    <span th:text="${contact.name}">홍길동</span>
                                    <span> · </span>
                                    <span th:text="${contact.phone}">010-0000-0000</span>
                                    <span> · </span>
                                    <span th:text="${contact.email}">sample@example.com</span>
                                </p>
                            </div>
                            <span class="text-sm text-gray-400"
                                  th:text="${#temporals.format(contact.submittedAt, 'yyyy-MM-dd HH:mm')}">2026-04-17 09:00</span>
                        </div>
                        <p class="mt-3 whitespace-pre-wrap text-sm leading-6 text-gray-600" th:text="${contact.message}">문의 내용</p>
                    </article>
                </div>
            </div>
        </section>

        <section class="rounded-2xl border border-gray-200 bg-white">
            <div class="flex items-center justify-between gap-3 px-6 py-5">
                <div>
                    <h2 class="text-base font-medium 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 border border-gray-200 bg-white px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
                   th:href="@{/mfuc/portfolio/list.do}">
                    관리 이동
                </a>
            </div>
            <div class="border-t border-gray-100 p-4 sm:p-6">
                <div th:if="${#lists.isEmpty(recentPortfolios)}" class="rounded-xl bg-gray-50 px-4 py-6 text-sm text-gray-500">
                    아직 등록된 포트폴리오가 없습니다.
                </div>
                <div th:unless="${#lists.isEmpty(recentPortfolios)}" class="space-y-4">
                    <a class="flex gap-4 rounded-2xl border border-gray-100 bg-gray-50 p-4 transition hover:border-brand-200 hover:bg-brand-25"
                       th:each="portfolio : ${recentPortfolios}"
                       th:href="@{/mfuc/portfolio/form.do(portfolioIdntfNo=${portfolio.portfolioIdntfNo})}">
                        <img class="h-20 w-28 rounded-xl object-cover"
                             th:src="${portfolio.imageUrl}"
                             th:alt="${portfolio.title}">
                        <div class="min-w-0 flex-1">
                            <h3 class="truncate text-base font-semibold text-gray-900" th:text="${portfolio.title}">포트폴리오 제목</h3>
                            <p class="mt-2 text-sm leading-6 text-gray-500" th:text="${portfolio.summary}">설명</p>
                            <div class="mt-3 flex flex-wrap items-center gap-3 text-xs text-gray-400">
                                <span th:text="${portfolio.registeredByName}">관리자</span>
                                <span th:text="${#temporals.format(portfolio.registeredAt, 'yyyy-MM-dd HH:mm')}">2026-04-17 09:00</span>
                                <span th:text="|조회 ${portfolio.viewCount}|">조회 0</span>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </section>
    </div>
</div>
</body>
</html>
