<!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 th:if="${server.id == null}">서버 등록</h3>
                <h3 th:if="${server.id != null}">서버 수정</h3>
            </div>
            <div class="card-body">
                <form name="serverForm" id="serverForm"
                      th:action="${server.id==null}?@{/mgmt/servers/register.do}:@{/mgmt/servers/update.do}"
                      th:object='${server}' method="post">
                    <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}">
                    <input type="hidden" th:name="id" th:value="${server.id}">
                    <div class="form-floating mt-2">
                        <input type="text" class="form-control" th:field="*{name}" placeholder="서버명" required>
                        <label for="name">서버명</label>
                        <th:block th:each="err : ${#fields.errors('name')}">
                            <div th:text="${err}" class="invalid-feedback"></div>
                        </th:block>
                    </div>
                    <div class="input-group col-md mt-2">
                        <div class="form-floating">
                            <select class="form-select" th:field="*{scheme}" style="border-top-right-radius: 0; border-bottom-right-radius: 0;">
                                <option value="http" th:selected="${server.scheme =='http'}">http</option>
                                <option value="https" th:selected="${server.scheme =='https'}">https</option>
                            </select>
                            <label for="scheme">Scheme</label>
                        </div>
                        <span class="input-group-text" id="inputGroup-sizing-sm">://</span>
                        <div class="form-floating">
                            <input type="text" class="form-control" style="border-radius: 0;" th:field="*{hostname}" placeholder="서버 주소" required>
                            <label for="hostname">서버 주소</label>
                            <th:block th:each="err : ${#fields.errors('hostname')}">
                                <div th:text="${err}" class="invalid-feedback"></div>
                            </th:block>
                        </div>
                        <span class="input-group-text" id="inputGroup-sizing-sm">:</span>
                        <div class="form-floating">
                            <input type="text" class="form-control" style="border-radius: 0;" th:field="*{port}" placeholder="포트" required>
                            <label for="port">포트</label>
                            <th:block th:each="err : ${#fields.errors('port')}">
                                <div th:text="${err}" class="invalid-feedback"></div>
                            </th:block>
                        </div>
                        <div class="form-floating">
                            <input type="text" class="form-control" style="border-top-left-radius: 0; border-bottom-left-radius: 0;" th:field="*{basePath}" placeholder="기본 경로" required>
                            <label for="basePath">기본 경로</label>
                            <th:block th:each="err : ${#fields.errors('basePath')}">
                                <div th:text="${err}" class="invalid-feedback"></div>
                            </th:block>
                        </div>
                    </div>
                    <div class="form-check mt-2">
                        <input type="checkbox" class="form-check-input" th:field="*{enabled}" placeholder="사용 여부">
                        <label class="form-check-label" for="enabled">사용?</label>
                    </div>
                </form>
            </div>
            <div class="card-footer">
                <button type="button" class="btn btn-primary btn_list"><i class="fa-solid fa-list"></i> 목록</button>
                <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("serverForm");
                if (!form.checkValidity()) {
                    event.preventDefault()
                    event.stopPropagation()
                } else {
                    form.submit();
                }
                form.classList.add('was-validated');
            });

            let fnList = document.querySelector(".btn_list");

            fnList.addEventListener("click", function () {
                location.href = "[[@{/mgmt/servers/list_view.do}]]";
            });
        });
    </script>
</th:block>
</html>