<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<header>
    <nav id="bodyNav" th:data-islogin="${isLogin}" class="navbar navbar-expand-md bg-light navbar-light fixed-top">
        <a class="navbar-brand" href="/">
            <img th:src="${globalConfig.websiteLogoUrl}"
                 th:alt="${globalConfig.websiteName}"
                 src="https://static.developers.pub/logo.jpeg" width="30" height="30" alt="" loading="lazy">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul class="navbar-nav mr-auto">
                <li th:class="${'nav-item' + (#strings.equals(currentDomain, 'article') ? ' selected-domain' : '')}" class="nav-item">
                    <a class="nav-link" href="/">文章</a>
                </li>
                <li th:class="${'nav-item' + (#strings.equals(currentDomain, 'faq') ? ' selected-domain' : '')}" class="nav-item">
                    <a class="nav-link" href="/faq">问答</a>
                </li>
                <li th:if="${isLogin}" th:class="${'nav-item' + (#strings.equals(currentDomain, 'interest') ? ' selected-domain' : '')}" class="nav-item">
                    <a class="nav-link" href="/interest">关注</a>
                </li>
            </ul>
            <form class="form-inline my-md-0" action="/search" method="get" target="_blank">
                <input name="key" required class="form-control mr-sm-2" type="text" placeholder="搜索">
            </form>
            <ul th:if="${!isLogin}" class="navbar-nav my-md-0">
                <li class="nav-item">
                    <a class="nav-link" href="#" data-toggle="modal" data-target="#loginModal">登录</a>
                </li>
            </ul>
            <ul th:if="${isLogin}" class="navbar-nav my-md-0">
                <li class="nav-item">
                    <a class="nav-link navbar-count-msg-box" href="/message" target="_blank">
                        <span th:if="${loginUser.unReadMsgNumber > 0}" class="navbar-count-msg"></span>
                        <i data-feather="bell" style="width: 18px;height: 18px;"></i>
                    </a>
                </li>
                <!-- Dropdown -->
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
                        <img th:src="${loginUser.avatar}" src="https://static.developers.pub/static/img/logo.b2ff606.jpeg" width="30" height="30" alt="" loading="lazy">
                    </a>
                    <div class="dropdown-menu">
                        <a th:if="${!#strings.equalsIgnoreCase(loginUser.role, 'USER')}" href="/admin" target="_blank" class="dropdown-item">管理后台</a>
                        <div th:if="${!#strings.equalsIgnoreCase(loginUser.role, 'USER')}" class="dropdown-divider"></div>
                        <a th:href="${'/user/' + loginUser.id}" class="dropdown-item" target="_blank" href="#">个人主页</a>
                        <a href="/user/logout" class="dropdown-item">登出</a>
                    </div>
                </li>
            </ul>
        </div>
    </nav>
    <!-- 登录 Modal -->
    <div class="modal fade" id="loginModal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="loginModalDropLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="loginModalDropLabel">邮箱登录</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text">邮箱</span>
                        </div>
                        <input id="loginEmail" type="email" class="form-control" placeholder="请输入登录邮箱" />
                    </div>
                    <br/>
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text">密码</span>
                        </div>
                        <input id="loginPassword" type="password" class="form-control" placeholder="请输入登录密码" />
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="loginBtn" type="button" class="btn btn-primary">登录</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal" data-toggle="modal" data-target="#registerModal">去注册</button>
                </div>
                <div class="modal-footer third-oauth-login-box">
                    <a th:href="${globalConfig.githubOauthUrl}" href="https://github.com/login/oauth/authorize?client_id=5c00b7f2065217732aa3&scope=user" target="_blank">
                        <img src="https://static.developers.pub/f78f99e7a8f04dbf9dfccf5f1c3c6072" alt="github登录" width="40" height="40">
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!-- 注册 Modal -->
    <div class="modal fade" id="registerModal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="registerModalDropLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="registerModalDropLabel">邮箱注册</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text">邮箱</span>
                        </div>
                        <input id="registerEmail" type="email" class="form-control" placeholder="注册邮箱（用于接收账号激活邮件）" />
                    </div>
                    <br/>
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text">昵称</span>
                        </div>
                        <input id="registerNickname" type="text" class="form-control" placeholder="给自己起个昵称呗（50字以内）" />
                    </div>
                    <br/>
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text">密码</span>
                        </div>
                        <input id="registerPassword" type="password" class="form-control" placeholder="注册密码" />
                    </div>
                    <br/>
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text">确认</span>
                        </div>
                        <input id="registerPassword2" type="password" class="form-control" placeholder="请再次输入注册密码" />
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="registerBtn" type="button" class="btn btn-primary">注册</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal" data-toggle="modal" data-target="#loginModal">去登录</button>
                </div>
                <div class="modal-footer third-oauth-login-box">
                    <a th:href="${globalConfig.githubOauthUrl}" href="https://github.com/login/oauth/authorize?client_id=5c00b7f2065217732aa3&scope=user" target="_blank">
                        <img src="https://static.developers.pub/f78f99e7a8f04dbf9dfccf5f1c3c6072" alt="github登录" width="40" height="40">
                    </a>
                </div>
            </div>
        </div>
    </div>
</header>

</html>