<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">

<!-- 导航栏 -->
<nav th:fragment="header" class="navbar sticky-top navbar-expand-lg navbar-light"
     style="opacity: 0.9;background-color: #ffffff;box-shadow: 0px -2px 10px #d0cccc;">
    <div class="container">
        <!--标题-->
        <a class="navbar-brand">
            Quinn
        </a>
        <!--小屏幕下拉响应-->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample07" aria-controls="navbarsExample07" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <!-- 导航  -->
        <div class="collapse navbar-collapse" id="navbarsExample07">
            <ul class="navbar-nav mr-auto">
                <li th:class="${activeUrl=='index.html'?'nav-item active':'nav-item'}">
                    <a class="nav-link" th:href="@{/index}">首页 </a>
                </li>
<!--                <li th:class="${activeUrl=='question'?'nav-item active':'nav-item'}">-->
<!--                    <a class="nav-link" th:href="@{/question}">问答 </a>-->
<!--                </li>-->
                <li th:class="${activeUrl=='blog'?'nav-item active':'nav-item'}">
                    <a class="nav-link" th:href="@{/blog}">论坛 </a>
                </li>
                <li th:class="${activeUrl=='hotspot'?'nav-item active':'nav-item'}">
                    <a class="nav-link" th:href="@{/hotspot}">热门资源 </a>
                </li>
                <li th:class="${activeUrl=='source'?'nav-item active':'nav-item'}">
                    <a class="nav-link" th:href="@{/source}">资源库 </a>
                </li>
                <li th:class="${activeUrl=='about'?'nav-item active':'nav-item'}">
                    <a class="nav-link" th:href="@{/about}">关于 </a>
                </li>
            </ul>

            <div>
                <form th:action="@{/search}" method="get">
                    <ul class="navbar-nav">
                        <li>
                            <input class="mr-2 mt-2" name="findWhat" type="text" placeholder="大佬想找什么呢？"/>
                        </li>
                        <li>
                            <button type="submit" class="btn btn-sm btn-primary mr-2 mt-2">
                                全站搜索
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
                                    <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
                                </svg>
                            </button>
                        </li>
                    </ul>
                </form>
            </div>

            <!--如果未登录-->
            <div class="mt-2" sec:authorize="!isAuthenticated()">
                <a class="btn btn-sm btn-primary mr-auto" th:href="@{/toLogin}" role="button">
                    <svg class="bi bi-person-fill" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
                    </svg>
                    登录
                </a>
            </div>

            <!--如果已登录-->
            <div sec:authorize="isAuthenticated()">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item dropdown">
                        <a  style="color: rgba(0,0,0,.5);text-decoration: none" class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <img th:src="${session.loginUser.getAvatar()}" style="width: 30px;height:30px;border-radius: 50%;" alt="">
                            <span sec:authentication="name"></span>
                            <!--<span th:text="${session.SPRING_SECURITY_CONTEXT.authentication.principal.username}"></span>-->
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" th:href="@{'/user'}">个人中心</a>
                            <a class="dropdown-item" th:href="@{'/userinfo/setting'}">更新资料</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" th:href="@{/logout}">注销</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</nav>
</html>
