<!DOCTYPE html>
<html th:fragment="layout (head, content)"
      lang="ko" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">

<head th:replace="${head}">
</head>

<body>

<header class="fixed-top d-xxl-none p-0">
    <nav class="navbar navbar-light bg-light">
        <div class="container-fluid p-0">
            <button class="navbar-toggler btn" data-bs-toggle="offcanvas" data-bs-target="#offcanvasMenu"
                    aria-controls="offcanvasMenu">
                <i class="fas fa-bars"></i>
            </button>
            <div id="nav-brand" class="nav-brand">
                <a th:href="@{/}">Jinia's LOG</a>
            </div>
            <div id="nav-login" sec:authorize="!isAuthenticated()">
                <a th:href="@{/login}"><span class="pe-2">로그인</span></a>
            </div>
            <div sec:authorize="isAuthenticated()" class="pe-2">
                <span sec:authorize="hasRole('USER')" th:text="${#authentication.name} + '님'"></span>
                <a th:href="@{/article/write}" sec:authorize="hasRole('ADMIN')">
                    <span style="font-size: 21px"><i class="fas fa-edit"></i></span>
                </a>
            </div>
        </div>
    </nav>

    <!-- offcanvas s -->
    <aside class="offcanvas offcanvas-start " data-bs-scroll="true" style="max-width: 300px;" tabindex="-1"
           id="offcanvasMenu" aria-labelledby="offcanvasLabel">
        <div class="offcanvas-header bg-light">
            <button class="btn btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>

        <div class="offcanvas-body bg-light">
            <div th:replace="layout/sideBar.html :: sideBar"></div>
        </div>
    </aside>
    <!-- offcanvass e -->
</header>

<!-- 실제 body s -->
<section class="row g-0 row-cols-xxl-2 g-xxl-0 p-0 ">

    <!-- sidebar-xxl -->
    <div class="bg-light sidebar col-xxl-2 d-none d-xxl-block p-0 overflow-auto">
        <div class="p-4 sidebar-inner bg-light">
            <div th:replace="layout/sideBar.html :: sideBar"></div>
        </div>
    </div>
    <!-- sidebar e -->
    <!-- xxl dummy -->
    <div class="bg-light col-xxl-2 d-none d-xxl-block p-0">
    </div>
    <!--  -->

    <!-- sections -->
    <div class="col-xxl-10 p-0 sections-container">

        <button id="arrow" class="arrow-up">
            <i class="fas fa-arrow-up"></i>
        </button>

        <section th:replace="${content}"></section>
        <script th:src="@{/js/arrow.js}"></script>
        <script th:src="@{/js/search.js}"></script>
        <!-- scripts e -->
    <!-- sections e -->

        <footer class="footer bg-light mt-5">
            <div class="container text-center p-2">
                <h5><span class="text-muted">Copyright ©Jinia</span></h5>
            </div>
        </footer>
    </div>
</section>
<!-- body e -->
</body>

</html>
