<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/layout}">
<th:block layout:fragment="script">
  <script type="text/javascript" th:src="@{/js/admin/userMgt.js}"></script>
</th:block>
<div layout:fragment="content">
  <main class="pt-3">
    <h4>페이지 이름</h4>
    <div class="row mx-0">
      <div class="col-12 card">
        <div class="card-body">
          <div class="row justify-content-start">
            <div class="col-7">
              <!--검색 form-->
              <!--<form method="get" th:action="@{/admin/userMgt}">
                <input type="hidden" name="pageIndex" id="pageIndex" th:value="${searchParams.pageIndex}">
                <div class="row justify-content-between">
                  <div class="col-auto row">
                    <div class="col-auto">
                      <label for="viewCnt" class="col-form-label">데이터 수</label>
                    </div>
                    <div class="col-auto">
                      <select class="form-select" name="viewCnt" id="viewCnt">
                        <th:block th:each="num : ${#numbers.sequence(1,5)}">
                          <option th:value="${num*10}" th:text="${num*10}" th:selected="${searchParams.viewCnt==num*10}"></option>
                        </th:block>
                      </select>
                    </div>
                  </div>
                  <div class="col-auto">
                    <div class="row justify-content-end">
                      <div class="col-auto">
                        <select class="form-select" id="searchConditionSelector">
                          <option value="userId" th:selected="${searchParams.userId!=null and searchParams.userId!=''}">아이디</option>
                          <option value="name" th:selected="${searchParams.name!=null and searchParams.name!=''}">이름</option>
                          <option value="positionName" th:selected="${searchParams.positionName!=null and searchParams.positionName!=''}">부서</option>
                          <option value="departmentName" th:selected="${searchParams.departmentName!=null and searchParams.departmentName!=''}">직급</option>
                          <option value="createDate" th:selected="${searchParams.startDate!=null and searchParams.startDate!=''} or ${searchParams.endDate!=null and searchParams.endDate!=''}">생성일</option>
                        </select>
                      </div>
                      <div class="col-auto" id="searchTextDiv">
                        <input type="text" class="form-control" id="textSearch" th:value="${
                          (searchParams.userId!=null and searchParams.userId!='')?searchParams.userId:(
                            (searchParams.name!=null and searchParams.name!='')?searchParams.name:(
                              (searchParams.positionName!=null and searchParams.positionName!='')?searchParams.positionName:(
                                (searchParams.departmentName!=null and searchParams.departmentName!='')?searchParams.departmentName:''
                                )
                              )
                            )
                        }">
                      </div>
                      <div class="col-auto input-group w-auto input-daterange" id="dateSelectorDiv" style="display: none">
                        <input type="text" class="form-control" id="startDate" name="startDate" placeholder="시작일" autocomplete="off" disabled th:value="${searchParams.startDate}">
                        <input type="text" class="form-control" id="endDate" name="endDate" placeholder="종료일" autocomplete="off" disabled th:value="${searchParams.endDate}">
                      </div>
                      <div class="col-auto">
                        <input type="submit" class="btn btn-primary" id="searchBtn" value="검색">
                      </div>
                    </div>
                  </div>
                </div>
              </form>-->
              <div class="row-cols-6">
                <table class="table table-striped">
                  <thead>
                  <tr>
                    <th></th>
                    <th>아이디</th>
                    <th>이름</th>
                    <th>부서</th>
                    <th>직급</th>
                    <th>생성일</th>
                    <th>상태</th>
                  </tr>
                  </thead>
                  <tbody>
                  <!--<tr class="userInfoTr" th:each="userInfo:${userInfoList}">
                    <td>
                      <input type="checkbox" class="userInfoCheckBox" th:value="${userInfo.userSeq}">
                    </td>
                    <td th:text="${userInfo.userId}"></td>
                    <td th:text="|${userInfo.name}${#strings.contains(userInfo.userRole,'ADMIN')?'(관리자)':''}|"></td>
                    <td th:text="${userInfo.positionName}"></td>
                    <td th:text="${userInfo.departmentName}"></td>
                    <td th:text="${#temporals.format(userInfo.createDate, 'yyyy-MM-dd')}"></td>
                    <td th:text="${#strings.contains(userInfo.userStatus,'T')?'활성화':'비활성화'}"></td>
                  </tr>-->
                  </tbody>
                </table>
              </div>
              <div class="row justify-content-between">
                <div class="col-auto"></div>
                <div class="col-auto">
                  <nav aria-label="Page navigation">
                    <ul class="pagination">
                      <!--<th:block th:if="${searchParams.pageIndex>3}">
                        <li class="page-item" th:data-pageindex="${(searchParams.pageIndex)-3}">
                          <a class="page-link" href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                          </a>
                        </li>
                      </th:block>
                      <th:block th:each="num : ${#numbers.sequence(searchParams.startNum, searchParams.endNum)}">
                        <li class="page-item" th:data-pageindex="${num}" th:classappend="${searchParams.pageIndex==num?'active':''}">
                          <a class="page-link" href="#" th:text="${num}"></a>
                        </li>
                      </th:block>
                      <th:block th:if="${searchParams.maxNum>searchParams.endNum+2}">
                        <li class="page-item" th:data-pageindex="${(searchParams.pageIndex)+3}">
                          <a class="page-link" href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                          </a>
                        </li>
                      </th:block>-->
                    </ul>
                  </nav>
                </div>
                <div class="col-auto">
                  <input type="button" class="btn btn-success" value="사용자 생성" data-bs-toggle="modal" data-bs-target="#userInfoModal">
                </div>
              </div>
            </div>
            <div class="col-5">
              <ul class="nav nav-tabs" id="userTab" role="tablist">
                <li class="nav-item" role="presentation">
                  <button class="nav-link active" id="infoTab" data-bs-toggle="tab" type="button" role="tab">개인정보</button>
                </li>
                <li class="nav-item" role="presentation">
                  <button class="nav-link" id="categoryTab" data-bs-toggle="tab" type="button" role="tab">권한</button>
                </li>
              </ul>
              <div class="tab-content border border-top-0" id="userContent">
                <div class="py-5">
                  <h3>목록에서 선택해주세요.</h3>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</div>
</html>