<!doctype html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">

<head>
    <meta charset="utf-8">
</head>

<body>
<header th:fragment="headerFragment" class="border-bottom" id="header">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
            <a th:href="@{/}" class="text-dark text-decoration-none">
                <div class="d-flex align-items-center">
                    <img th:src="@{/img/logo.png}" class="logo me-3"/>
                    <div class="logo_only" style="width: 20px; height: 30px; border-left: 2px solid #efefef;"></div>
                    <span class="fs-3 logo_only" style="color: #6d6447">API Simulator</span>
                </div>
            </a>
            <div class="d-flex justify-content-end">
                <div class="d-flex flex-fill justify-content-between hide">
                    <div class="text-center flex-fill" sec:authorize="isAuthenticated()">
                        <a class="nav-link" href="/mgmt/routes/list_view.do">응답 관리</a>
                    </div>
                    <div class="text-center flex-fill" sec:authorize="isAuthenticated()">
                        <a class="nav-link" href="/mgmt/api_tester.do">요청 관리</a>
                    </div>
                    <div class="text-center flex-fill" sec:authorize="hasRole('ROLE_ADMIN')" >
                        <div class="d-flex justify-content-center">
                            <div class="nav-item dropdown">
                                <a class="nav-link" style="padding: 0.5rem 0.5rem !important;" href="#" id="mgmtDropDown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                    <span>시스템 관리</span>
                                </a>
                                <ul class="dropdown-menu" aria-labelledby="mgmtDropDown" style="width: 8rem;">
                                    <li><a class="dropdown-item" href="/mgmt/users/list_view.do">사용자 관리</a></li>
                                    <!--                            <li><a class="dropdown-item" href="/mgmt/groups/list_view.do">그룹 관리</a></li>-->
                                    <li><a class="dropdown-item" href="/mgmt/servers/list_view.do">서버 관리</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="text-center flex-fill" sec:authorize="isAuthenticated()">
                        <a href="/change_password.do" class="nav-link">비밀번호 변경</a>
                    </div>
                    <div class="text-center flex-fill" sec:authorize="isAuthenticated()">
                        <a href="/actionLogout.do" class="nav-link">로그 아웃</a>
                    </div>
                    <div class="text-center flex-fill" sec:authorize="isAnonymous()">
                        <a href="/login" class="nav-link">로그인</a>
                    </div>
                </div>
            </div>
        </div>
    </nav>
</header>

<nav th:fragment="navFragment" class="d-flex flex-wrap align-items-center justify-content-center border-bottom" id="nav_bar">

</nav>

<!-- header script -->
<th:block th:fragment="headerScript">
    <script th:inline="javascript">
        $(function () {
            $.ajaxSetup({
                beforeSend: function(xhr) {
                    xhr.setRequestHeader("X-XSRF-TOKEN", /*[[${_csrf.token}]]*/ );
                }
            });
            $(window).scroll(function () {
                var offsetHeight = document.getElementById("header").offsetHeight;
                if ($(window).scrollTop() > offsetHeight) {
                    $('#nav_bar').addClass('fixed_top');
                }

                if ($(window).scrollTop() < offsetHeight) {
                    $('#nav_bar').removeClass('fixed_top');
                }
            });
        });
    </script>
</th:block>
</body>

</html>
