<!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">
    <section class="rounded-2xl border border-gray-200 bg-white">
        <div class="flex flex-wrap 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/index.do}">
                대시보드
            </a>
        </div>
        <div class="border-t border-gray-100 p-4 sm:p-6">
            <div th:if="${#lists.isEmpty(contacts)}" class="rounded-xl bg-gray-50 px-4 py-6 text-sm text-gray-500">
                아직 저장된 문의가 없습니다.
            </div>
            <div th:unless="${#lists.isEmpty(contacts)}" 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="contact : ${contacts}">
                        <td class="px-3 py-4 text-gray-500"
                            th:text="${#temporals.format(contact.submittedAt, 'yyyy-MM-dd HH:mm')}">2026-04-17 09:00</td>
                        <td class="px-3 py-4 font-medium text-gray-900" th:text="${contact.name}">홍길동</td>
                        <td class="px-3 py-4 text-gray-500" th:text="${contact.phone}">010-0000-0000</td>
                        <td class="px-3 py-4 text-gray-500" th:text="${contact.email}">sample@example.com</td>
                        <td class="px-3 py-4 text-gray-900" th:text="${contact.subject}">문의 제목</td>
                        <td class="px-3 py-4 whitespace-pre-wrap leading-6 text-gray-500"
                            style="min-width: 320px;"
                            th:text="${contact.message}">문의 내용</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </section>
</div>
</body>
</html>
