<!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="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="grid gap-6 xl:grid-cols-[1.2fr_0.8fr]">
        <section class="rounded-2xl border border-gray-200 bg-white">
            <div class="px-6 py-5">
                <h2 class="text-base font-medium text-gray-800">사용자 목록</h2>
                <p class="mt-1 text-sm text-gray-500">현재 등록된 사용자 계정을 검색하고 수정 화면으로 이동할 수 있습니다.</p>
            </div>
            <div class="border-t border-gray-100 p-4 sm:p-6">
                <form class="mb-5 flex flex-col gap-3 md:flex-row md:items-end" method="get" th:action="@{/mfuc/user/list.do}">
                    <div class="flex-1">
                        <label class="mb-2 block text-sm font-medium text-gray-700" for="keyword">검색</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="keyword"
                               name="keyword"
                               th:value="${keyword}"
                               placeholder="아이디, 이름, 이메일 검색">
                    </div>
                    <button class="inline-flex items-center justify-center 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 justify-center 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/user/list.do}">
                        신규 등록
                    </a>
                </form>

                <div th:if="${#lists.isEmpty(users)}" class="rounded-xl bg-gray-50 px-4 py-6 text-sm text-gray-500">
                    조회된 사용자가 없습니다.
                </div>
                <div th:unless="${#lists.isEmpty(users)}" 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-2 py-3">아이디</th>
                            <th class="px-2 py-3">이름</th>
                            <th class="px-2 py-3">이메일</th>
                            <th class="px-2 py-3">유형</th>
                            <th class="px-2 py-3">상태</th>
                            <th class="px-2 py-3">가입일</th>
                            <th class="px-2 py-3">관리</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr class="border-b border-gray-100 last:border-0"
                            th:each="user : ${users}">
                            <td class="px-2 py-3 font-medium text-gray-900" th:text="${user.userId}">admin</td>
                            <td class="px-2 py-3 text-gray-500" th:text="${user.userNm}">관리자</td>
                            <td class="px-2 py-3 text-gray-500" th:text="${user.emlAddr}">admin@example.com</td>
                            <td class="px-2 py-3 text-gray-500" th:text="${user.userTypeCd}">ADM</td>
                            <td class="px-2 py-3">
                                <span class="inline-flex rounded-full px-2.5 py-1 text-xs font-medium"
                                      th:classappend="${user.userSttsCd == 'A' or user.userSttsCd == 'P'} ? ' bg-success-50 text-success-700' : ' bg-error-50 text-error-700'"
                                      th:text="${user.userSttsCd == 'A' ? '사용중' : (user.userSttsCd == 'P' ? '대기' : '비활성')}">사용중</span>
                            </td>
                            <td class="px-2 py-3 text-gray-500"
                                th:text="${user.joinDt != null ? #temporals.format(user.joinDt, 'yyyy-MM-dd HH:mm') : '-'}">2026-04-17 09:00</td>
                            <td class="px-2 py-3">
                                <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/user/list.do(userIdntfNo=${user.userIdntfNo},keyword=${keyword})}">
                                    수정
                                </a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </section>

        <section class="rounded-2xl border border-gray-200 bg-white">
            <div class="px-6 py-5">
                <h2 class="text-base font-medium text-gray-800"
                    th:text="${form.userIdntfNo != null and !#strings.isEmpty(form.userIdntfNo) ? '사용자 수정' : '신규 사용자 등록'}">신규 사용자 등록</h2>
                <p class="mt-1 text-sm text-gray-500">관리자 콘솔에서 사용할 계정과 일반 사용자 계정을 함께 등록할 수 있습니다.</p>
            </div>
            <div class="border-t border-gray-100 p-4 sm:p-6">
                <form class="space-y-5" method="post" th:action="@{/mfuc/user/save.do}" th:object="${form}">
                    <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}">
                    <input type="hidden" th:field="*{userIdntfNo}">
                    <input type="hidden" name="keyword" th:value="${keyword}">

                    <div class="text-sm text-error-600" th:if="${#fields.hasGlobalErrors()}">
                        <span th:each="error : ${#fields.globalErrors()}" th:text="${error}">오류</span>
                    </div>

                    <div>
                        <label class="mb-2 block text-sm font-medium text-gray-700" for="userId">아이디</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="userId"
                               th:field="*{userId}"
                               th:readonly="${form.userIdntfNo != null and !#strings.isEmpty(form.userIdntfNo)}"
                               placeholder="로그인 아이디">
                        <div class="mt-2 text-sm text-error-600" th:if="${#fields.hasErrors('userId')}" th:errors="*{userId}">아이디 오류</div>
                    </div>

                    <div>
                        <label class="mb-2 block text-sm font-medium text-gray-700" for="userNm">이름</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="userNm"
                               th:field="*{userNm}"
                               placeholder="사용자 이름">
                        <div class="mt-2 text-sm text-error-600" th:if="${#fields.hasErrors('userNm')}" th:errors="*{userNm}">이름 오류</div>
                    </div>

                    <div>
                        <label class="mb-2 block text-sm font-medium text-gray-700" for="emlAddr">이메일</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="emlAddr"
                               th:field="*{emlAddr}"
                               placeholder="user@example.com">
                        <div class="mt-2 text-sm text-error-600" th:if="${#fields.hasErrors('emlAddr')}" th:errors="*{emlAddr}">이메일 오류</div>
                    </div>

                    <div class="grid gap-4 md:grid-cols-2">
                        <div>
                            <label class="mb-2 block text-sm font-medium text-gray-700" for="userTypeCd">유형</label>
                            <select 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="userTypeCd"
                                    th:field="*{userTypeCd}">
                                <option value="USR">일반 사용자</option>
                                <option value="ADM">관리자</option>
                            </select>
                        </div>
                        <div>
                            <label class="mb-2 block text-sm font-medium text-gray-700" for="userSttsCd">상태</label>
                            <select 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="userSttsCd"
                                    th:field="*{userSttsCd}">
                                <option value="A">사용중</option>
                                <option value="P">대기</option>
                                <option value="I">비활성</option>
                            </select>
                        </div>
                    </div>

                    <div>
                        <label class="mb-2 block text-sm font-medium text-gray-700" for="password">
                            비밀번호
                            <span th:text="${form.userIdntfNo != null and !#strings.isEmpty(form.userIdntfNo) ? '(변경 시에만 입력)' : ''}"></span>
                        </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="password"
                               th:field="*{password}"
                               type="password"
                               th:placeholder="${form.userIdntfNo != null and !#strings.isEmpty(form.userIdntfNo) ? '새 비밀번호를 입력할 때만 변경됩니다.' : '초기 비밀번호'}">
                        <div class="mt-2 text-sm text-error-600" th:if="${#fields.hasErrors('password')}" th:errors="*{password}">비밀번호 오류</div>
                    </div>

                    <div class="flex flex-wrap gap-3">
                        <button class="inline-flex items-center justify-center 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 justify-center 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/user/list.do(keyword=${keyword})}">
                            초기화
                        </a>
                    </div>
                </form>
            </div>
        </section>
    </div>
</div>
</body>
</html>
