<!DOCTYPE html>
<th:block layout:fragment="script">
  <script th:inline="javascript">
    const sailorVersionList = [[${session.sailorVersionList}]];
  </script>
</th:block>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<div class="modal-header">
  <h5 class="modal-title" id="sailorEditModalLabel">선원 세부 현황</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 sailorTab" id="sailor-tab" data-bs-toggle="tab"
            data-bs-target="#sailor" type="button" role="tab" aria-controls="sailor" data-sailor-type="sailor"
            aria-selected="true">상세</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link sailorTab 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">
  <div class="tab-pane fade show active" id="history" role="tabpanel" aria-labelledby="history-tab">
    <div class="modal-body" id="sailorEditBody">
      <form action="#" method="post" id="sailorEditForm">
        <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="sailorKey" th:value="${sailor.sailorKey}">
        <input type="hidden" name="cdsKey" th:value="${sailor.cdsKey}">
        <input type="hidden" name="fbKey" th:value="${sailor.fbKey}">
        <th:block th:if="${!#lists.isEmpty(sailorVersionList)}">
          <div class="row justify-content-start">
            <div class="col-3">
              <table class="table table-striped table-bordered"  id="sailorTable">
                <thead>
                <tr>
                  <th></th>
                  <th>작성인</th>
                  <th>작성/수정일</th>
                </tr>
                </thead>
                <tbody class="table-group-divider">
                <th:block th:each="sailorVersion:${sailorVersionList}">
                  <tr class="version-tr">
                    <td>
                      <input type="radio" name="versionNo" th:value="${sailorVersion.versionNo}">
                    </td>
                    <td th:text="${sailorVersion.wrtUserNm}"></td>
                    <td th:text="${#temporals.format(sailorVersion.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">
                  <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="boatNameKr" 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="sailorNameKr" 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="sailorNameCn" 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="birthdate" 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="residence" 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="education" 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="position" 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="career" 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="arrestHistory" 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="similarCriminalHistory" 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="heterogeneousCriminalHistory" 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="criminalHistoryDetail" 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="note" 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="monthlyWages" readonly>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </th:block>
        <th:block th:if="${#lists.isEmpty(sailorVersionList)}">
          <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>