<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<script type="text/javascript" th:src="@{/js/translator/translator.js}"></script>
<div class="card">
  <div class="card-header bg-white">
    <div class="row justify-content-between">
      <div class="col-auto">민간통역인현황</div>
      <div class="col-auto"><a href="/translator/info" class="link-dark"><i class="bi bi-list"></i></a></div>
    </div>
  </div>
  <div class="card-body">
    <input type="hidden" id="selectedKey">
    <input type="hidden" id="selectedVerNo">
    <table class="table table-striped">
      <thead>
      <tr>
        <th>관서명</th>
        <th>언어</th>
        <th>성명</th>
        <th>위촉일</th>
        <th>연락처</th>
      </tr>
      </thead>
      <tbody>
      <tr class="userInfoTr" data-bs-toggle="dropdown" aria-expanded="false" th:each="trInfo:${translatorList}">
        <input type="hidden" class="trKey" th:value="${trInfo.translatorKey}">
        <input type="hidden" class="verNo" th:value="${trInfo.versionNo}">
        <td>
          <p class="m-0" th:text="${trInfo.ogdp1}"></p>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item careerInfo" href="#">경력관리</a></li>
            <li><a class="dropdown-item translatorInfo" href="#">인적사항</a></li>
          </ul>
        </td>
        <td th:text="${trInfo.trLang}"></td>
        <td th:text="${trInfo.trName}"></td>
        <td th:text="${trInfo.aptDt}"></td>
        <td th:text="${trInfo.trPhone}"></td>
      </tr>
      </tbody>
    </table>
  </div>
</div>
<div class="modal fade" id="translatorEditModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="authEditModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="menuEditModalLabel">통역인 정보</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div id="KeyValue">
      </div>
      <div class="modal-body">
        <ul class="nav nav-tabs" id="userTab" role="tablist">
          <li class="nav-item" role="presentation">
            <button class="nav-link active" id="accessTab" data-bs-toggle="tab" data-bs-target="#accessTabPanel" type="button" role="tab" aria-controls="accessTabPanel" aria-selected="true">인적사항</button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" id="approvalTab" data-bs-toggle="tab" data-bs-target="#approvalTabPanel" type="button" role="tab" aria-controls="approvalTabPanel" aria-selected="false">수정이력</button>
          </li>
        </ul>
        <div class="tab-content border border-top-0" id="configInfo">
        </div>
      </div>
    </div>
  </div>
</div>


<div class="modal fade" id="translatorCareerModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="authEditModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5>경력현황</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="tab-content border border-top-0" id="careerView">
        </div>
      </div>
    </div>
  </div>
</div>
</html>