<!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="css">
  <style>
    .pie-chart {
      display:inline-block;
      position:relative;
      width: 200px;
      height: 200px;
      border-radius: 50%;
    }
    .pie-chart  .centerWhite{
      position:absolute;
      width:120px;
      height: 120px;
      background :#fff;
      border-radius: 50%;
      top: 40px;
      left: 40px;
    }
  </style>
</th:block>
<div layout:fragment="content" class="pt-3">
  <main class="pt-3">
    <h4>관리자 메인 페이지</h4>
    <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><i class="bi bi-square-fill"></i><span> 저장공간</span></h5>
              <th:block th:each="diskInfo:${diskInfoList}">
                <div class="row justify-content-center py-3 border rounded">
                  <div class="col-12"><h5 th:text="${diskInfo.driveName}"></h5></div>
                  <div class="col-auto">
                    <div class="pie-chart" th:style="|background: conic-gradient(#ACACAC 0% ${diskInfo.useSizePer}%, #26A0DA ${diskInfo.useSizePer}% 100%)|">
                      <span class="centerWhite"></span>
                    </div>
                  </div>
                  <div class="col-auto mt-auto">
                    <div>전체 용량: <span th:text="${diskInfo.totalSize}"></span></div>
                    <div><i class="bi bi-square-fill" style="color: #26A0DA"></i> 사용중: <span th:text="${diskInfo.freeSize}"></span></div>
                    <div><i class="bi bi-square-fill" style="color: #ACACAC"></i> 빈 공간: <span th:text="${diskInfo.useSize}"></span></div>
                  </div>
                </div>
              </th:block>
            </div>
            <div class="col-8">
              <h5><i class="bi bi-square-fill"></i><span> 전체 이력</span></h5>
              <table class="table table-striped table-hover">
                <thead>
                <tr>
                  <th>제목</th>
                  <th>행동</th>
                  <th>내용</th>
                  <th>사용자</th>
                  <th>발생일시</th>
                </tr>
                </thead>
                <tbody>
                <th:block th:each="log:${boardLogList}">
                  <tr>
                    <td colspan="5" class="p-0">
                      <a class="fs-6 text-decoration-none" th:href="|/board/contentList?categorySeq=${log.categorySeq}|"
                         th:text="${log.categoryName}"></a>
                    </td>
                  </tr>
                  <tr>
                    <td th:text="${log.title}"></td>
                    <td th:text="${statusMap.get(log.logStatus)}"></td>
                    <td th:text="${log.description}"></td>
                    <td th:text="${log.createName}"></td>
                    <td th:text="${#temporals.format(log.createDate, 'yyyy-MM-dd HH:mm:ss')}"></td>
                  </tr>
                </th:block>
                </tbody>
              </table>
              <div class="row justify-content-center">
                <div class="col-auto">
                  <nav aria-label="Page navigation">
                    <ul class="pagination">
                      <th:block th:if="${searchParams.pageIndex>3}">
                        <li class="page-item">
                          <a class="page-link" th:href="|/admin/main?pageIndex=${(searchParams.pageIndex)-3}|" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                          </a>
                        </li>
                      </th:block>
                      <th:block th:each="num : ${#numbers.sequence(searchParams.startNum, searchParams.endNum)}">
                        <li class="page-item" th:classappend="${searchParams.pageIndex==num?'active':''}">
                          <a class="page-link" th:href="|/admin/main?pageIndex=${(num)}|" th:text="${num}"></a>
                        </li>
                      </th:block>
                      <th:block th:if="${searchParams.maxNum>searchParams.endNum+2}">
                        <li class="page-item">
                          <a class="page-link" th:href="|/admin/main?pageIndex=${(searchParams.pageIndex)+3}|" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                          </a>
                        </li>
                      </th:block>
                    </ul>
                  </nav>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</div>
</html>