<!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/user/info.js}"></script>
</th:block>
<div layout:fragment="content">
  <main class="pt-3">
    <div class="row justify-content-between">
      <div class="col-auto"><h4>개인정보</h4></div>
      <div class="col-auto">
        <th:block th:if="${!#strings.contains(loginUser.userRole,'ADMIN')}">
          <a class="btn btn-success mb-2" href="/info/modifyRequestList"> 요청 현황</a>
          <a class="btn btn-warning mb-2" href="/info/modifyRequestWrite"> 수정 요청</a>
        </th:block>
      </div>
    </div>
    <div class="row mx-0">
      <div class="col-12 card">
        <div class="card-body">
          <div class="row justify-content-start">
            <div class="col-4">
              <h5 class="ps-3">계정정보</h5>
              <div class="card">
                <div class="card-body">
                  <div class="p-3">
                    <div class="mb-3 row">
                      <label for="userId" class="col-sm-3 col-form-label">아이디</label>
                      <div class="col-sm-9">
                        <input type="text" readonly class="form-control-plaintext" id="userId" th:value="${loginUser.userId}">
                      </div>
                    </div>
                    <div class="mb-3 row">
                      <label for="name" class="col-sm-3 col-form-label">이름</label>
                      <div class="col-sm-9">
                        <input type="text" readonly class="form-control-plaintext" id="name" th:value="${loginUser.name}">
                      </div>
                    </div>
                    <div class="mb-3 row">
                      <label for="staticEmail" class="col-sm-3 col-form-label">권한</label>
                      <div class="col-sm-9">
                        <input type="text" readonly class="form-control-plaintext" id="staticEmail" th:value="${#strings.contains(loginUser.userRole, 'ADMIN')?'관리자':'사용자'}">
                      </div>
                    </div>
                    <div class="mb-3 row">
                      <label for="department" class="col-sm-3 col-form-label">부서</label>
                      <div class="col-sm-9">
                        <th:block th:each="department:${session.departmentList}">
                          <th:block th:if="${department.codeSq==loginUser.department}">
                            <input type="text" readonly class="form-control-plaintext" id="department" th:value="${department.value}">
                          </th:block>
                        </th:block>
                      </div>
                    </div>
                    <div class="mb-3 row">
                      <label for="position" class="col-sm-3 col-form-label">직책</label>
                      <div class="col-sm-9">
                        <th:block th:each="position:${session.positionList}">
                          <th:block th:if="${position.codeSq==loginUser.position}">
                            <input type="text" readonly class="form-control-plaintext" id="position" th:value="${position.value}">
                          </th:block>
                        </th:block>

                      </div>
                    </div>
                    <div class="mb-3 row">
                      <label for="createDate" class="col-sm-3 col-form-label">계정생성일</label>
                      <div class="col-sm-9">
                        <input type="text" readonly class="form-control-plaintext" id="createDate" th:value="${#temporals.format(loginUser.createDate, 'yyyy-MM-dd')}">
                      </div>
                    </div>
                    <div class="mb-3 row justify-content-center">
                      <div class="col-auto">
                        <button class="btn btn-warning" id="passwordModifyBtn" data-bs-toggle="modal" data-bs-target="#passwordModifyModal">비밀번호 변경</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <th:block th:if="${!#strings.contains(loginUser.userRole,'ADMIN')}">
              <div class="col-8">
                <h5 class="ps-3">작성 권한</h5>
                <div class="card">
                  <div class="card-body">
                    <div class="p-3">
                      <div class="row justify-content-between">
                        <div class="col-auto"><button type="button" class="btn btn-info" id="moveLeftBtn"><i class="bi bi-arrow-left"></i></button></div>
                        <div class="col-auto"><button type="button" class="btn btn-info" id="moveRightBtn"><i class="bi bi-arrow-right"></i></button></div>
                      </div>
                      <div class="row overflow-auto flex-nowrap" id="categorySelectBody">
                        <th:block th:each="depth1:${session.categoryList}">
                          <div class="col-auto">
                            <table class="table table-striped">
                              <thead>
                              <tr>
                                <th colspan="3" class="text-center" th:text="${depth1.categoryName}"></th>
                              </tr>
                              <tr>
                                <th>연도</th>
                                <th>중분류</th>
                                <th>소분류</th>
                              </tr>
                              </thead>
                              <tbody>
                              <th:block th:each="depth2:${depth1.childCategoryList}">
                                <th:block th:each="depth3:${depth2.childCategoryList}">
                                  <th:block th:each="depth4:${depth3.childCategoryList}">
                                    <tr th:class="${#lists.contains(categorySeqList, depth4.categorySeq)}?'bg-success bg-opacity-25':''">
                                      <td class="depth2Td" th:data-categoryseq="${depth2.categorySeq}" th:text="${depth2.categoryName}"></td>
                                      <td class="depth3Td" th:data-categoryseq="${depth3.categorySeq}" th:text="${depth3.categoryName}"></td>
                                      <td class="depth4Td" th:data-categoryseq="${depth4.categorySeq}" th:text="${depth4.categoryName}"></td>
                                    </tr>
                                  </th:block>
                                </th:block>
                              </th:block>
                              </tbody>
                            </table>
                          </div>
                        </th:block>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </th:block>
          </div>
        </div>
      </div>
    </div>
  </main>
  <div class="modal fade" id="passwordModifyModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="passwordModifyModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="passwordModifyModalLabel">비밀번호 변경</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body mx-4">
          <form th:action="@{/info/passwordModify}" method="post" id="modifyPasswordForm">
            <div class="mb-3 row">
              <label for="password" class="col-sm-4 col-form-label text-end">현재 비밀번호</label>
              <div class="col-sm-7">
                <input type="password" class="form-control" id="password" name="password">
              </div>
            </div>
            <div class="mb-3 row">
              <label for="modifyPassword" class="col-sm-4 col-form-label text-end">새 비밀번호</label>
              <div class="col-sm-7">
                <input type="password" class="form-control" id="modifyPassword" name="modifyPassword">
              </div>
            </div>
            <div class="mb-3 row">
              <label for="passwordConfirm" class="col-sm-4 col-form-label text-end">새 비밀번호 확인</label>
              <div class="col-sm-7">
                <input type="password" class="form-control" id="passwordConfirm">
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button>
          <button type="button" class="btn btn-primary" id="savePasswordBtn">저장</button>
        </div>
      </div>
    </div>
  </div>
</div>
</html>