<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<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>
              <input type="checkbox" class="categoryCheckBox parentSeq" th:data-categoryseq="${depth1.categorySeq}"
                     th:checked="${#lists.contains(categorySeqList, depth1.categorySeq)}">
            </th>
            <th colspan="3" class="text-center" th:text="${depth1.categoryName}"></th>
          </tr>
          <tr>
            <th></th>
            <th>연도</th>
            <th>중분류</th>
            <th>소분류</th>
          </tr>
          </thead>
          <tbody>
          <th:block th:each="depth2:${depth1.childCategoryList}">
            <tr>
              <td>
                <input type="checkbox" class="categoryCheckBox parentSeq"
                       th:data-categoryseq="${depth2.categorySeq}" th:data-parentseq="${depth2.parentSeq}"
                       th:checked="${#lists.contains(categorySeqList, depth2.categorySeq)}">
              </td>
              <td th:text="${depth2.categoryName}"></td>
              <td></td>
              <td></td>
            </tr>
            <th:block th:each="depth3:${depth2.childCategoryList}">
              <tr>
                <td>
                  <input type="checkbox" class="categoryCheckBox parentSeq"
                         th:data-categoryseq="${depth3.categorySeq}" th:data-parentseq="${depth3.parentSeq}"
                         th:checked="${#lists.contains(categorySeqList, depth3.categorySeq)}">
                </td>
                <td></td>
                <td th:text="${depth3.categoryName}"></td>
                <td></td>
              </tr>
              <th:block th:each="depth4:${depth3.childCategoryList}">
                <tr>
                  <td>
                    <input type="checkbox" class="categoryCheckBox" th:data-categoryseq="${depth4.categorySeq}"
                           th:data-parentseq="${depth4.parentSeq}" th:checked="${#lists.contains(categorySeqList, depth4.categorySeq)}">
                  </td>
                  <td></td>
                  <td></td>
                  <td th:text="${depth4.categoryName}"></td>
                </tr>
              </th:block>
            </th:block>
          </th:block>
          </tbody>
        </table>
      </div>
    </th:block>
  </div>
  <div class="row justify-content-end">
    <div class="col-auto">
      <button type="button" class="btn btn-primary" id="saveCategoryRoleBtn">저장</button>
    </div>
  </div>
</div>
</html>