<!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/police/edu.js}"></script>
</th:block>
<div layout:fragment="content">
  <main class="pt-3">
    <h4>외사경찰 교육 현황</h4>
    <input type="hidden" name="_csrf_header" th:value="${_csrf.headerName}"/>
    <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
    <div class="row mx-0">
      <div class="col-12 card text-center">
        <div class="card-body">
          <div class="row justify-content-start">
            <div class="col-12">
              <ul class="nav nav-tabs" id="userTab" role="tablist">
                <li class="nav-item" role="presentation">
                  <button class="nav-link" id="presentTab" th:classappend="${userStatus eq 'USC003'?' active':''}" data-userstatus="USC003" data-bs-toggle="tab" type="button" role="tab">現외사경찰</button>
                </li>
                <li class="nav-item" role="presentation">
                  <button class="nav-link" id="previousTab" th:classappend="${userStatus eq 'USC006'?' active':''}" data-userstatus="USC006" data-bs-toggle="tab" type="button" role="tab">前외사경찰</button>
                </li>
                <li class="nav-item" role="presentation">
                  <button class="nav-link" id="notPoliceTab" th:classappend="${userStatus eq 'USC007'?' active':''}" data-userstatus="USC007" data-bs-toggle="tab" type="button" role="tab">非외사경찰</button>
                </li>
              </ul>
              <div class="tab-content border border-top-0 p-3" id="userContent">
                <div class="card">
                  <div class="card-body">
                    <div class="row">
                      <div class="col-12">
                        <form id="searchFm" method="get" th:action="@{/police/educationMgt}">
                          <input type="hidden" name="excel">
                          <input type="hidden" name="userStatus" th:value="${userStatus}">
                          <input type="hidden" name="pageIndex" id="pageIndex" th:value="${searchParams.pageIndex}">
                          <div class="row justify-content-between pe-3 py-1">
                            <div class="col-auto">
                              <select class="form-select form-select-sm" name="rowCnt" id="rowCnt">
                                <th:block th:each="num : ${#numbers.sequence(1,5)}">
                                  <option th:value="${num*10}" th:text="${num*10}" th:selected="${searchParams.rowCnt==num*10}"></option>
                                </th:block>
                              </select>
                            </div>
                          </div>
                          <div class="row justify-content-end pe-3 py-1">
                            <div class="col-auto">
                              <div class="row justify-content-end">
                                <div class="col-auto">
                                  <select class="form-select form-select-sm" name="ogCd">
                                    <option value="">관서 선택</option>
                                    <th:block th:each="commonCode:${session.commonCode.get('OG')}">
                                      <th:block th:if="${#lists.contains(mgtOrganList, commonCode.itemCd)}">
                                        <option th:value="${commonCode.itemCd}" th:text="${commonCode.itemValue}" th:selected="${searchParams.ogCd eq commonCode.itemCd}"></option>
                                      </th:block>
                                    </th:block>
                                  </select>
                                </div>
                                <div class="col-auto">
                                  <select class="form-select form-select-sm" name="sex">
                                    <option value="">성별</option>
                                    <th:block th:each="commonCode:${session.commonCode.get('SEX')}">
                                      <option th:value="${commonCode.itemCd}" th:text="${commonCode.itemValue}" th:selected="${searchParams.sex eq commonCode.itemCd}"></option>
                                    </th:block>
                                  </select>
                                </div>
                                <div class="col-auto">
                                  <input type="text" class="form-control form-control-sm" placeholder="이름" name="userNm" th:value="${searchParams.userNm}">
                                </div>
                                <input type="submit" class="btn btn-sm btn-primary col-auto" id="searchBtn" value="검색">
                              </div>
                            </div>
                          </div>
                        </form>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-12">
                        <table class="table table-hover table-bordered">
                          <thead>
                          <tr class="table-secondary">
                            <th>순번</th>
                            <th>계급</th>
                            <th>성명</th>
                            <th>청</th>
                            <th>현부서<br>과</th>
                            <th>생년월일</th>
                            <th>성별</th>
                            <th>고등학교</th>
                            <th>전문대</th>
                            <th>대학교</th>
                            <th>석사</th>
                            <th>박사</th>
                            <th>전공</th>
                          </tr>
                          </thead>
                          <tbody class="table-group-divider">
                          <tr class="policeTr" th:each="list:${policeList}">
                            <th:block>
                              <input type="hidden" class="userSeq" th:value="${list.userSeq}">
                            </th:block>
                            <td th:text="${list.rownum}"></td>
                            <td th:text="${list.titleCd}"></td>
                            <td th:text="${list.userNm}"></td>
                            <td th:text="${list.organNm}"></td>
                            <td th:text="${list.ofcCd}"></td>
                            <td th:text="${list.birthDate}"></td>
                            <td th:text="${list.sex}"></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                          </tr>
                          </tbody>
                        </table>
                      </div>
                    </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">
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>

  <div class="modal fade" id="eduEditModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="eduEditModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
      <div class="modal-content" id="eduEditModalContent">

      </div>
    </div>
  </div>


</div>
</html>