<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<div class="modal-header">
  <h5 class="modal-title" id="crackdownStatusEditModalLabel">불법조업 외국어선 단속등록</h5>
  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<!-- 탭 메뉴 -->
<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link crackdownStatusTab" id="crackdownStatus-tab" data-bs-toggle="tab"
            data-bs-target="#crackdownStatus" type="button" role="tab" aria-controls="crackdownStatus" data-crackdownStatus-type="crackdownStatus"
            aria-selected="true">상세</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link crackdownStatusTab active" id="history-tab" data-bs-toggle="tab"
            data-bs-target="#history" type="button" role="tab" data-history-type="history"
            aria-controls="history">수정이력</button>
  </li>
</ul>

<!-- 내용 -->
<div class="tab-content" style="overflow-y: scroll">
  <div class="tab-pane fade show active" id="history" role="tabpanel" aria-labelledby="history-tab">
    <div class="modal-body" id="cdsEditBody">
      <form action="#" method="post" id="cdsEditForm">
        <input type="hidden" name="_csrf_header" th:value="${_csrf.headerName}"/>
        <input type="hidden" name="_csrf_header" th:value="${_csrf.headerName}"/>
        <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
        <input type="hidden" name="cdsKey" th:value="${crackdownStatus.cdsKey}">
        <th:block th:if="${!#lists.isEmpty(crackdownStatusVersionList)}">
          <div class="row justify-content-start">
            <div class="col-3">
              <table class="table table-striped table-bordered"  id="crackdownStatusVersionTable">
                <thead>
                <tr>
                  <th></th>
                  <th>작성인</th>
                  <th>작성/수정일</th>
                </tr>
                </thead>
                <tbody class="table-group-divider">
                <th:block th:each="crackdownStatusVersion:${crackdownStatusVersionList}">
                  <tr class="version-tr">
                    <td>
                      <input type="radio" name="versionNo" th:value="${crackdownStatusVersion.versionNo}">
                    </td>
                    <td th:text="${crackdownStatusVersion.wrtUserNm}"></td>
                    <td th:text="${#temporals.format(crackdownStatusVersion.wrtDt, 'yyyy-MM-dd HH:mm')}"></td>
                  </tr>
                </th:block>
                </tbody>
              </table>
            </div>
            <div class="col-9">
              <div id="historyDetailDiv">
                <div class="mb-3 row">
                  나포정보
                </div>
                <div class="mb-3 row">
                  <label class="col-sm-2 col-form-label col-form-label-sm text-center">나포일시</label>
                  <div class="col-4">
                    <input class="form-control form-control-sm" name="napoDt" id="napoDt" readonly>
                  </div>
                  <label class="col-sm-2 col-form-label col-form-label-sm text-center">NLL</label>
                  <div class="col-4">
                    <input class="form-control form-control-sm" name="nll" id="nll" readonly>
                  </div>
                </div>
                <div class="mb-3 row">
                  <label class="col-sm-2 col-form-label col-form-label-sm text-center">침범유형</label>
                  <div class="col-4">
                    <input class="form-control form-control-sm" name="invasionType" id="invasionType" readonly>
                  </div>
                </div>
                <div class="mb-3 row">
                  <label class="col-sm-2 col-form-label col-form-label-sm text-center">위반장소</label>
                  <div class="col-6">
                    <input class="form-control form-control-sm" placeholder="위도" name="napoSeaPointLat" readonly>
                    <input class="form-control form-control-sm" placeholder="경도" name="napoSeaPointLon" readonly>
                    <input class="form-control form-control-sm" placeholder="상세내용" name="napoSeaPointDetail" readonly>
                  </div>
                </div>
                <div class="mb-3 row">
                  특수공무집행방해
                </div>
                <div class="mb-3 row">
                  <label class="col-sm-2 col-form-label col-form-label-sm text-center">발생건수</label>
                  <div class="col-4">
                    <input type="number" min="0" class="form-control form-control-sm" name="obstrExspdCnt" readonly>
                  </div>
                  <label class="col-sm-2 col-form-label col-form-label-sm text-center">피해인원</label>
                  <div class="col-4">
                    <input type="number" min="0" class="form-control form-control-sm" name="personDamageCnt" readonly>
                  </div>
                </div>
                <div class="mb-3 row">
                  <label class="col-sm-2 col-form-label col-form-label-sm text-center">피해액</label>
                  <div class="col-4">
                    <input type="number" min="0" class="form-control form-control-sm" name="personDamageAmount" readonly>
                  </div>
                  <label class="col-sm-2 col-form-label col-form-label-sm text-center">상세내용</label>
                  <div class="col-4">
                    <input class="form-control form-control-sm" name="personDamageDetail" readonly>
                  </div>
                </div>
                <div class="mb-3 row">
                  <label class="col-sm-2 col-form-label col-form-label-sm text-center">발생건수</label>
                  <div class="col-4">
                    <input type="number" min="0" class="form-control form-control-sm" name="materialDamageCnt" readonly>
                  </div>
                  <label class="col-sm-2 col-form-label col-form-label-sm text-center">피해액</label>
                  <div class="col-4">
                    <input type="number" min="0" class="form-control form-control-sm" name="materialDamageAmount" readonly>
                  </div>
                </div>
                <div class="mb-3 row">
                  <label class="col-sm-2 col-form-label col-form-label-sm text-center">상세내용</label>
                  <div class="col-4">
                    <input class="form-control form-control-sm" name="materialDamageDetail" readonly>
                  </div>
                </div>
                <div class="mb-3 row">
                  검거기관
                </div>
                <div class="mb-3 row">
                  <label class="col-sm-2 col-form-label col-form-label-sm text-center">사건담당 기관</label>
                  <div class="col-4">
                    <input class="form-control form-control-sm" name="caseAgency" readonly>
                  </div>
                  <label class="col-sm-2 col-form-label col-form-label-sm text-center">단속<br>경찰서</label>
                  <div class="col-4">
                    <input class="form-control form-control-sm" name="crackdownPolice" readonly>
                  </div>
                </div>
                <div class="mb-3 row">
                  <label class="col-sm-2 col-form-label col-form-label-sm text-center">단속함정</label>
                  <div class="col-4">
                    <input class="form-control form-control-sm" name="crackdownBoat" readonly>
                  </div>
                  <label class="col-sm-2 col-form-label col-form-label-sm text-center">MMSI.NO</label>
                  <div class="col-4">
                    <input class="form-control form-control-sm" name="mmsi" readonly>
                  </div>
                </div>
                <div class="mb-3 row">
                  현장조사
                </div>
                <div class="mb-3 row">
                  <label class="col-sm-2 col-form-label col-form-label-sm text-center">나포일시</label>
                  <div class="col-4">
                    <input class="form-control form-control-sm" name="fieldIvsgtNapoDt" id="fieldIvsgtNapoDt" readonly>
                  </div>
                  <label class="col-sm-2 col-form-label col-form-label-sm text-center">석방일시</label>
                  <div class="col-4">
                    <input class="form-control form-control-sm" name="fieldIvsgtReleaseDt" id="fieldIvsgtReleaseDt" readonly>
                  </div>
                </div>
                <div class="mb-3 row">
                  <label class="col-sm-2 col-form-label col-form-label-sm text-center">소요시간</label>
                  <div class="col-4">
                    <input class="form-control form-control-sm" name="fieldIvsgtTimeTaken" readonly>
                  </div>
                </div>
                <div class="mb-3 row">
                  압송
                </div>
                <div class="mb-3 row">
                  <label class="col-sm-2 col-form-label col-form-label-sm text-center">압송시작</label>
                  <div class="col-4">
                    <input class="form-control form-control-sm" name="pressurizedStartDt" id="pressurizedStartDt" readonly>
                  </div>
                  <label class="col-sm-2 col-form-label col-form-label-sm text-center">압송종료</label>
                  <div class="col-4">
                    <input class="form-control form-control-sm" name="pressurizedEndDt" id="pressurizedEndDt" readonly>
                  </div>
                </div>
                <div class="mb-3 row">
                  <label class="col-sm-2 col-form-label col-form-label-sm text-center">영장청구<br>소요시간</label>
                  <div class="col-4">
                    <input class="form-control form-control-sm" name="warrantReqTakeTime" readonly>
                  </div>
                  <label class="col-sm-2 col-form-label col-form-label-sm text-center">거리</label>
                  <div class="col-4">
                    <input class="form-control form-control-sm" name="distance" readonly>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </th:block>
        <th:block th:if="${#lists.isEmpty(crackdownStatusVersionList)}">
          <div>수정이력이 없습니다.</div>
        </th:block>
      </form>
    </div>
  </div>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button>
</div>
</html>