<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/base_layout}">
<body>

<section layout:fragment="contentFragment">
    <div class="container mt-2">
        <div class="card">
            <div class="card-header">
                <h1>최초 Admin 등록</h1>
            </div>
            <div class="card-body">
                <form name="staffUserForm" id="staffUserForm" th:action="@{/admin_register.do}" th:object='${user}' method="post">
                    <input id="csrf" type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}">
                    <div class="form-floating mt-2">
                        <input type="text" class="form-control" th:classappend="${#fields.hasErrors('userId')}? 'is-invalid'" th:field="*{userId}" name="userId" id="userId" required th:readonly="${user.esntlId != null}"/>
                        <label for="userId" class="form-label must">사용자ID</label>
                        <th:block th:each="err : ${#fields.errors('userId')}">
                            <div th:text="${err}" class="invalid-feedback"></div>
                        </th:block>
                    </div>
                    <div class="form-floating mt-2" th:if="${user.esntlId == null}">
                        <input type="password" class="form-control" th:classappend="${#fields.hasErrors('password')}? 'is-invalid'" th:field="*{password}" name="password" id="password" required/>
                        <label for="password" class="form-label must" th:text="#{password}">비밀번호</label>
                        <th:block th:each="err : ${#fields.errors('password')}">
                            <div th:text="${err}" class="invalid-feedback"></div>
                        </th:block>
                    </div>
                    <div class="form-floating mt-2" th:if="${user.esntlId == null}">
                        <input type="password" class="form-control" th:classappend="${#fields.hasErrors('password2')}? 'is-invalid'" th:field="*{password2}" name="password2" id="password2" required/>
                        <label for="password2" class="form-label must">비밀번호 확인</label>
                        <th:block th:each="err : ${#fields.errors('password2')}">
                            <div th:text="${err}" class="invalid-feedback"></div>
                        </th:block>
                    </div>

                    <div class="form-floating mt-2">
                        <input type="text" class="form-control" th:classappend="${#fields.hasErrors('username')}? 'is-invalid'" th:field="*{username}" name="username" id="username" required/>
                        <label for="username" class="form-label must" th:text="#{username}">이름</label>
                        <th:block th:each="err : ${#fields.errors('username')}">
                            <div th:text="${err}" class="invalid-feedback"></div>
                        </th:block>
                    </div>

                    <div class="form-floating mt-2">
                        <input type="text" class="form-control" th:classappend="${#fields.hasErrors('mobilePhone')}? 'is-invalid'" th:field="*{mobilePhone}" name="mobilePhone" id="mobilePhone" required/>
                        <label for="mobilePhone" class="form-label must" th:text="#{mobilePhone}">연락처</label>
                        <th:block th:each="err : ${#fields.errors('mobilePhone')}">
                            <div th:text="${err}" class="invalid-feedback"></div>
                        </th:block>
                    </div>
                </form>
            </div>
            <div class="card-footer">
                <button type="button" class="btn btn-primary btn_register"><i class="fa-sharp fa-solid fa-floppy-disk"></i> 저장</button>
            </div>
        </div>
    </div>
</section>
</body>

<th:block layout:fragment="contentScript">
    <script>
        $(function () {
            let fnRegister = document.querySelector(".btn_register");
            fnRegister.addEventListener("click", function (event) {
                let form = document.getElementById("staffUserForm");
                if (!form.checkValidity()) {
                    event.preventDefault()
                    event.stopPropagation()
                } else {
                    form.submit();
                }
                form.classList.add('was-validated');
            });
        });
    </script>
</th:block>
</html>

