<!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">
        <div class="card mt-1">
            <div class="card-header">
                <h1>서버 목록</h1>
            </div>
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <form role="form" name="searchForm" th:action="@{/mgmt/servers/list_view.do}" method="get" th:object="${modelSearch}">
                        <input name="page" type="hidden" value="1"/>
                        <div class="search_field">
                            <div class="search_field_input">
                                <input class="form-control" name="username" placeholder="이름" type="text" size="35" th:title="#{title.search}+ '' + #{input.input}"
                                       th:value="${modelSearch.name}"
                                       maxlength="255"/>
                            </div>
                            <div class="search_field_button">
                                <button type="button" class="btn btn-primary btn_search" th:value="#{button.inquire}"><i class="fa-sharp fa-solid fa-magnifying-glass"></i> [[#{title.inquire}]]
                                </button>
                                <button type="button" class="btn btn-primary btn_delete"><i class="fa-sharp fa-solid fa-trash"></i> [[#{title.delete}]]</button>
                                <button type="button" class="btn btn-primary btn_add"><i class="fa-sharp fa-solid fa-plus"></i> [[#{button.create}]]</button><!-- 등록 -->
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="card mt-2">
            <div class="card-body">
                <form name="listForm">
                    <input name="id" type="hidden"/>
                    <input name="checkedIdForDel" type="hidden"/>
                    <input id="csrf" type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}">
                    <table class="table table-hover pt-table">
                        <colgroup>
                            <col style="width: 5%;">
                            <col style="width: 5%;">
                            <col style="width: 7%;">
                            <col>
                            <col>
                        </colgroup>
                        <thead>
                        <tr>
                            <th class="no">번호</th>
                            <th><input type="checkbox" name="checkAll" class="check2" onclick="fncCheckAll()" th:title="#{input.selectAll.title}"></th><!-- 전체선택 -->
                            <th>이름</th>
                            <th>주소</th>
                            <th>사용 중</th>
                            <th>비고</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="row, status : ${page.content}">
                            <td class="no" th:text="${page.getTotalElements() - (page.getNumber() * page.getSize() + status.count ) + 1}"></td>
                            <td>
                                <input type="checkbox" name="checkField" class="check2" title="선택"/>
                                <input name="checkId" type="hidden" th:value="${row.id}"/>
                            </td>
                            <td>
                                <span th:text="${row.name}"></span>
                            </td>
                            <td>
                                <span th:text="${row.getFullHostAddress()}"></span>
                            </td>
                            <td>
                                <span th:text="${row.enabled}"></span>
                            </td>
                            <td>
                                <button type="button" class="btn btn-primary btn-sm" th:onclick="fnSelectItem([[${row.id}]])" th:value="#{button.update}"><i class="fa-sharp fa-solid fa-edit"></i>
                                    [[#{button.update}]]
                                </button>
                            </td>
                        </tr>
                        <!-- 글이 없는 경우 -->
                        <tr th:if="${page.content.size() == 0 }">
                            <td colspan="5" th:text="#{common.nodata.msg}"></td>
                        </tr>
                        </tbody>
                    </table>
                </form>
            </div>
            <div class="card-footer">
                <div th:replace="~{fragment/pagination :: pagination(jsFunction='fn_select_page')}"></div>
            </div>
        </div>
    </div>

</section>

</body>


<th:block layout:fragment="contentScript">
    <script>
        function fn_select_page(pageNo) {
            document.searchForm.page.value = pageNo;
            document.searchForm.submit();
        }

        function fnSelectItem(id) {
            location.href = "[[@{/mgmt/servers/update_view.do}]]" + "?id=" + id;
        }

        $(function () {
            let fnSearch = document.querySelector(".btn_search");
            let fnDelete = document.querySelector(".btn_delete");
            let fnAdd = document.querySelector(".btn_add");

            fnSearch.addEventListener("click", function () {
                document.searchForm.page.value = 1;
                document.searchForm.submit();
            });

            fnDelete.addEventListener("click", function () {
                var checkField = document.listForm.checkField;
                var id = document.listForm.checkId;
                var checkedIds = "";
                var checkedCount = 0;
                if (checkField) {
                    if (checkField.length > 1) {
                        for (var i = 0; i < checkField.length; i++) {
                            if (checkField[i].checked) {
                                checkedIds += ((checkedCount == 0 ? "" : ",") + id[i].value);
                                checkedCount++;
                            }
                        }
                    } else {
                        if (checkField.checked) {
                            checkedIds = id.value;
                        }
                    }
                }
                if (checkedIds.length > 0) {
                    if (confirm("[[#{common.delete.msg}]]")) {
                        document.listForm.checkedIdForDel.value = checkedIds;
                        document.listForm.method = 'POST';
                        document.listForm.action = '[[@{/mgmt/servers/delete.do}]]';
                        document.listForm.submit();
                    }
                }
            });

            fnAdd.addEventListener("click", function () {
                location.href = '[[@{/mgmt/servers/create_view.do}]]';
            });
        })
    </script>

</th:block>

</html>
