<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<input type="hidden" name="_csrf_header" th:value="${_csrf.headerName}"/>
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
<div class="modal-header">
  <h5 class="modal-title" th:text="${userStatus eq 'USC003' ? '現 외사경찰 상세' : userStatus eq 'USC006' ? '前 외사경찰 상세' : userStatus eq 'USC007' ? '非 외사경찰 상세' : null}"></h5>
  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
  <ul class="nav nav-tabs" id="userTab" role="tablist">
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="editTab" th:data-userseq="${policeList[0].userSeq}" data-bs-toggle="tab" type="button" role="tab">현황 상세</button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link active" id="historyTab" th:data-userseq="${policeList[0].userSeq}" data-bs-toggle="tab" type="button" role="tab">수정이력</button>
    </li>
  </ul>
  <div class="row mx-0">
    <div class="col-100 card text-center">
      <div class="row">
      </div>
      <div class="row justify-content-start">
        <div class="col-4">
          <div class="card">
            <div class="card-body">
              <div class="row">
                <table class="table table-striped" id="categoryTable">
                  <thead>
                  <tr>
                    <th></th>
                    <th>작성자</th>
                    <th>등록일</th>
                  </tr>
                  </thead>
                  <tbody class="overflow-scroll">
                  <tr class="historyInfoTr" th:each="list:${policeList}">
                    <td>
                      <input type="checkbox" class="hisChk">
                      <input type="hidden" class="userSeq" th:value="${list.userSeq}">
                      <input type="hidden" class="verNo" th:value="${list.versionNo}">
                    </td>
                    <td th:text="|${list.wrtTitle} ${list.wrtNm}|"></td>
                    <td th:text="${#temporals.format(list.wrtDt, 'yyyy-MM-dd HH:mm')}"></td>
                    <td></td>
                    <td></td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
        <div class="col-8" id="valueDiv">
          <div class="mb-3 mt-3 row">
            <label for="dicCode" class="col-sm-2 col-form-label col-form-label-sm text-center ">공무원식별번호</label>
            <div class="col-sm-4">
              <input type="text" class="form-control form-control-sm dateSelector" id="vDicCode"readonly>
            </div>
          </div>
          <div class="mb-3 row">
            <label for="userId" class="col-sm-2 col-form-label col-form-label-sm text-center ">아이디</label>
            <div class="col-sm-4">
              <input type="text" class="form-control form-control-sm dateSelector" id="vUserId"readonly>
            </div>
            <label for="userNm" class="col-sm-2 col-form-label col-form-label-sm text-center">이름</label>
            <div class="col-sm-4">
              <input type="text" class="form-control form-control-sm dateSelector" id="vUserNm" readonly>
            </div>
          </div>
          <div class="mb-3 row">
            <label for="phoneNo" class="col-sm-2 col-form-label col-form-label-sm text-center">휴대전화</label>
            <div class="col-sm-4">
              <input type="text" class="form-control form-control-sm dateSelector" id="vPhone"readonly>
            </div>
            <label for="email" class="col-sm-2 col-form-label col-form-label-sm text-center">이메일</label>
            <div class="col-sm-4">
              <input type="text" class="form-control form-control-sm dateSelector" id="vEmail" readonly>
            </div>
          </div>
          <div class="mb-3 row">
            <label for="sex" class="col-sm-2 col-form-label col-form-label-sm text-center">성별</label>
            <div class="col-sm-4">
              <input type="text" class="form-control form-control-sm dateSelector" id="vSex"readonly>
            </div>
          </div>
          <div class="mb-3 row">
            <label for="birthDate" class="col-sm-2 col-form-label col-form-label-sm text-center">생년월일</label>
            <div class="col-sm-4">
              <input type="text" class="form-control form-control-sm dateSelector" id="vBirth"readonly>
            </div>
            <label for="policeInDate" class="col-sm-2 col-form-label col-form-label-sm text-center">해양경찰배명일</label>
            <div class="col-sm-4">
              <input type="text" class="form-control form-control-sm dateSelector" id="vPoliceInDate"readonly>
            </div>
          </div>
          <div class="mb-3 row">
            <label for="ogCd" class="col-sm-2 col-form-label col-form-label-sm text-center">관서</label>
            <div class="col-sm-4">
              <input type="text" class="form-control form-control-sm dateSelector" id="vOgCd" readonly>
            </div>
            <label for="organInDate" class="col-sm-2 col-form-label col-form-label-sm text-center">현관서전입일</label>
            <div class="col-sm-4">
              <input type="text" class="form-control form-control-sm dateSelector" id="vOrganInDate" readonly>
            </div>
          </div>
          <div class="mb-3 row">
            <label for="ofcCd" class="col-sm-2 col-form-label col-form-label-sm text-center">부서</label>
            <div class="col-sm-4">
              <input type="text" class="form-control form-control-sm dateSelector" id="vOfcCd"readonly>
            </div>
            <label for="ofcInDate" class="col-sm-2 col-form-label col-form-label-sm text-center">현부서임용일</label>
            <div class="col-sm-4">
              <input type="text" class="form-control form-control-sm dateSelector" id="vOfcInDate" readonly>
            </div>
          </div>
          <div class="mb-3 row">
            <label for="ogCd" class="col-sm-2 col-form-label col-form-label-sm text-center">계급</label>
            <div class="col-sm-4">
              <input type="text" class="form-control form-control-sm dateSelector" id="vTitleCd" readonly>
            </div>
            <label for="titleInDate" class="col-sm-2 col-form-label col-form-label-sm text-center">현계급임용일</label>
            <div class="col-sm-4">
              <input type="text" class="form-control form-control-sm dateSelector" id="vTitleInDate" readonly>
            </div>
          </div>
          <div class="mb-3 row">
            <label for="outturnCd" class="col-sm-2 col-form-label col-form-label-sm text-center">경과</label>
            <div class="col-sm-4">
              <input type="text" class="form-control form-control-sm dateSelector" id="vOutturnCd" readonly>
            </div>
            <label for="seriesCd" class="col-sm-2 col-form-label col-form-label-sm text-center">직별</label>
            <div class="col-sm-4">
              <input type="text" class="form-control form-control-sm dateSelector" id="vSeriesCd" readonly>
            </div>
          </div>
          <div class="mb-3 row">
            <label for="languageCd" class="col-sm-2 col-form-label col-form-label-sm text-center">외국어특채</label>
            <div class="col-sm-4">
              <input type="text" class="form-control form-control-sm dateSelector" id="vLanguageCd" readonly>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="modal-footer row justify-content-between">
  <div class="col-auto">
    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button>
  </div>
</div>
</html>