<!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/default_layout}">


<body>

<section layout:fragment="contentFragment">
    <div class="container-fluid">
        <div class="card mt-2">
            <div class="card-header">
                <h3>비밀 번호 변경 </h3>
            </div>
            <div class="card-body">
                <form name="passwordChangeRequest" id="passwordChangeRequest" class="form-horizontal form-horizontal_l" method="post" th:action="@{/update_password.do}"
                      th:object="${passwordChangeRequest}">
                    <!-- 기존 비밀번호 -->
                    <div class="form-floating">
                        <input class="form-control mb-3" th:classappend="${#fields.hasErrors('oldPassword')}? 'is-invalid'" name="oldPassword" id="oldPassword" th:field="*{oldPassword}" type="password"
                               size="20" value="" maxlength="100" required>
                        <label for="oldPassword" class="must" th:text="#{comUssUmt.userManagePasswordUpdt.oldPass}"></label>
                        <th:block th:each="err : ${#fields.errors('oldPassword')}">
                            <div th:text="${err}" class="invalid-feedback"></div>
                        </th:block>
                    </div>
                    <div class="form-floating">
                        <input class="form-control mb-3" th:classappend="${#fields.hasErrors('newPassword')}? 'is-invalid'" name="newPassword" id="newPassword" th:field="*{newPassword}" type="password"
                               size="20" value="" maxlength="100" required>
                        <label for="newPassword" class="must" th:text="#{comUssUmt.userManagePasswordUpdt.pass}"></label>
                        <th:block th:each="err : ${#fields.errors('newPassword')}">
                            <div th:text="${err}" class="invalid-feedback"></div>
                        </th:block>
                    </div>
                    <!-- 비밀번호확인 -->
                    <div class="form-floating">
                        <input class="form-control mb-3" th:classappend="${#fields.hasErrors('newPassword2')}? 'is-invalid'" name="newPassword2" id="newPassword2" th:field="*{newPassword2}"
                               type="password" size="20" value="" maxlength="100" required>
                        <label for="newPassword2" class="must" th:text="#{comUssUmt.userManagePasswordUpdt.passConfirm}"></label>
                        <th:block th:each="err : ${#fields.errors('newPassword2')}">
                            <div th:text="${err}" class="invalid-feedback"></div>
                        </th:block>
                    </div>
                </form>
            </div>
            <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="position: absolute; top: 0; right: 0;">
                <div class="toast-header">
                    <strong class="mr-auto">알림</strong>
                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
                <div class="toast-body">
                </div>
            </div>
            <div class="card-footer">
                <button type="button" class="btn btn-primary btn_update"><i class="fa-sharp fa-solid fa-floppy-disk"></i> 저장</button>
                <a th:href="@{/}" class="btn btn-primary" th:title="#{button.cancel}"><i class="fa-sharp fa-solid fa-cancel"></i> [[#{button.cancel}]]</a>
            </div>
        </div>
    </div>
</section>
</body>


<th:block layout:fragment="contentScript">
    <script>
        $(function () {
            document.getElementById("passwordChangeRequest").oldPassword.focus();
            let btnUpdate = document.querySelector(".btn_update");
            btnUpdate.addEventListener("click", function (event) {
                let form = document.getElementById("passwordChangeRequest");
                if (!form.checkValidity()) {
                    event.preventDefault()
                    event.stopPropagation()
                } else {
                    form.submit();
                }
                form.classList.add('was-validated');
            });
        })
    </script>
    <script th:if="${resultMsg != null}">
        $(function () {
            var resultMsg = '[[#{${resultMsg}}]]';
            if (resultMsg !== "") {
                $('.toast-body').text(resultMsg);
                $('.toast').toast('show');
            }
        })
    </script>

</th:block>

</html>
