<!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>사용자 목록</h1>
            </div>
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <form role="form" class="row g-3" name="searchForm" th:action="@{/mgmt/users/list_view.do}" method="get" th:object="${modelSearch}">
                        <input name="page" type="hidden" value="1"/>
                        <div class="col-auto">
                            <input class="form-control" name="username" placeholder="사용자 이름" type="text" size="35" th:title="#{title.search}+ '' + #{input.input}"
                                   th:value="${modelSearch.username}"
                                   maxlength="255"/>
                        </div>
                        <div class="col-auto">
                            <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>
                        </div>
                        <div class="col-auto">
                            <button type="button" class="btn btn-primary btn_delete"><i class="fa-sharp fa-solid fa-trash"></i> [[#{title.delete}]]</button>
                        </div>
                        <div class="col-auto">
                            <button type="button" class="btn btn-primary btn_add"><i class="fa-sharp fa-solid fa-plus"></i> [[#{button.create}]]</button><!-- 등록 -->
                        </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>
                            <col>
                            <col style="width: 7%;">
                            <col>
                        </colgroup>
                        <thead>
                        <tr>
                            <th><div class="text-center">번호</div></th>
                            <th>
                                <div class="text-center">
                                    <input type="checkbox" name="checkAll" class="form-check-input" onclick="fncCheckAll()" th:title="#{input.selectAll.title}">
                                </div>
                            </th>
                            <th><div class="text-center">ID</div></th>
                            <th><div class="text-center">이름</div></th>
                            <th><div class="text-center">상태</div></th>
                            <th><div class="text-center">비고</div></th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="row, status : ${page.content}">
                            <td class="text-center" th:text="${page.getNumber() * page.getSize() + status.count}"></td>
                            <td>
                                <div class="d-flex justify-content-center">
                                    <input type="checkbox" name="checkField" class="form-check-input" title="선택"/>
                                    <input name="checkId" type="hidden" th:value="${row.esntlId}"/>
                                </div>
                            </td>
                            <td>
                                <span th:text="${row.userId}"></span>
                            </td>
                            <td>
                                <div class="d-flex justify-content-center">
                                    <span th:text="${row.username}"></span>
                                </div>
                            </td>
                            <td>
                                <div class="d-flex justify-content-center">
                                    <span th:text="${row.status.toString()}"></span>
                                </div>
                            </td>
                            <td>
                                <div class="d-flex justify-content-end">
                                    <button type="button" class="btn btn-primary btn-sm me-2" th:onclick="fnSelectItem([[${row.esntlId}]])" th:value="#{button.update}"><i class="fa-sharp fa-solid fa-edit"></i>
                                        [[#{button.update}]]
                                    </button>
                                </div>
                            </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/users/update_view.do}]]" + "?userId=" + 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/users/delete.do}]]';
                        document.listForm.submit();
                    }
                }
            });

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

</th:block>

</html>
