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

<head>
    <div th:replace="fragments/head :: headFragment">
        <meta charset="UTF-8">
        <title id="pageTitle">Navbar Fragment</title>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/esm/popper.js" type="module" th:if="false"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css" th:if="false" rel="stylesheet" type="text/css">
    <script src="https://code.jquery.com/jquery-2.1.4.min.js" th:if="false"></script>
    <script src="http://blackpeppersoftware.github.io/thymeleaf-fragment.js/thymeleaf-fragment.js" defer="defer" th:if="false"></script>
</head>

<body>
    <th:block th:fragment="navbarFragment">
        <!-- <div class="container"> -->
        <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
            <div class="container">
                <a href="home.html" th:href="@{/}" class="navbar-brand">Chatto</a>
                <!-- <div class="navbar-header">
                    <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
                    <i class="fas fa-chevron-down"></i>
     
                    </button>
                </div>
                <div class="collapse navbar-collapse" id="navbarCollapse">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item">
                            <a href="home.html" th:href="@{/}" class="nav-link">Home</a>
                        </li>
                        <li class="nav-item">
                            <a href="user/home.html" sec:authorize="isFullyAuthenticated()" th:href="@{/user}" class="nav-link">User Area</a>
                        </li>
                        <li class="nav-item">
                            <a th:href="chat" href="chat.html" class="nav-link">Chat</a>
                        </li>
                        <li class="nav-item">
                            <a th:href="login" sec:authorize="!isFullyAuthenticated()" href="login.html" class="nav-link">Login</a>
                        </li>
                        <li class="nav-item">
                            <a th:href="registration" sec:authorize="!isFullyAuthenticated()" href="registration.html" class="nav-link">Register</a>
                        </li>
                        <li class="nav-item">
                            <a href="#" class="nav-link">About</a>
                        </li>
                        <li class="nav-item">
                            <a href="#" class="nav-link">Contact</a>
                        </li>
                        <li class="nav-item">
                            <a href="#" sec:authorize="isFullyAuthenticated()" th:href="@{/admin}" class="nav-link">
                                Admin Area
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="#" sec:authorize="isFullyAuthenticated()" th:text="${#authentication.name}" class="nav-link text-white font-weight-bold">
                                nova
                            </a>
                        </li>
                    </ul>
                </div> -->
                <th:block th:include="fragments/navbar :: navbarContent"></th:block>
            </div>
        </nav>
        <!-- </div> -->
    </th:block>

    <th:block th:fragment="navbarContent">
            <div class="navbar-header">
                    <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
                    <i class="fas fa-chevron-down"></i>
     
                    </button>
            </div>
            <div class="collapse navbar-collapse" id="navbarCollapse">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                        <a href="home.html" th:href="@{/}" class="nav-link">Home</a>
                    </li>
                    <li class="nav-item">
                        <a href="user/home.html" sec:authorize="isFullyAuthenticated()" th:href="@{/user}" class="nav-link">User Area</a>
                    </li>
                    <li class="nav-item">
                        <a th:href="@{/chat}" href="chat.html" class="nav-link">Chat</a>
                    </li>
                    <li class="nav-item">
                        <a th:href="login" sec:authorize="!isFullyAuthenticated()" href="login.html" class="nav-link">Login</a>
                    </li>
                    <li class="nav-item">
                        <a th:href="registration" sec:authorize="!isFullyAuthenticated()" href="registration.html" class="nav-link">Register</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">About</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">Contact</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" sec:authorize="hasRole('ROLE_ADMIN') || hasRole('ROLE_SUPER_USER')" th:href="@{/admin}" class="nav-link">
                            Admin Area
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#" sec:authorize="isFullyAuthenticated()" th:text="${#authentication.name}" class="nav-link text-white font-weight-bold">
                            nova
                        </a>
                    </li>
                </ul>
            </div>
    </th:block>
</body>

</html>