<div class="ui main  menu" id="menu">
    <div class="ui container">
        <div href="/" class="header borderless item">
            <img class="logo" src="static/assets/images/logo.png">
            &nbsp;Jiscuss
        </div>
        <a class=" item borderless" href="/">首页</a>
        <a class="active borderless item">论坛</a>
        <div class="ui dropdown item borderless" tabindex="0">
            更多
            <i class="dropdown icon"></i>
            <div class="menu transition hidden" tabindex="-1">
                <a class=" item " href="/user">用户页</a>
                <div class="divider"></div>
                <div class="item">分割链接</div>
                <div class="divider"></div>
                <a class="item" href="/admin/home">后台管理</a>
            </div>
        </div>
        <div class="right menu">
            <div class="item">
                <div class="ui transparent  icon input">
                    <i class="search icon"></i>
                    <input type="text" placeholder="搜索">
                </div>
            </div>
            <div class="item">
                <a id="themeToggle" title="切换主题" style="cursor:pointer; font-size:1.2em; color:inherit;">
                    <i class="moon icon" id="themeIcon"></i> 
                </a>
            </div>
            <#if username??>
            <div class="item">
                <a href="/notifications" title="通知" style="position:relative; cursor:pointer; color:inherit;">
                    <i class="bell icon"></i>
                    <span id="headerNotifBadge" class="ui circular mini red label"
                          style="display:none; position:absolute; top:-4px; right:-8px; font-size:10px; padding:2px 4px;"></span>
                </a>
            </div>
            <div class="item">
                <a href="/messages" title="私信" style="position:relative; cursor:pointer; color:inherit;">
                    <i class="envelope icon"></i>
                    <span id="headerMsgBadge" class="ui circular mini red label"
                          style="display:none; position:absolute; top:-4px; right:-8px; font-size:10px; padding:2px 4px;"></span>
                </a>
            </div>
            </#if>
            <div class="item" id="userlogin">
                <#if username??>
                    <form class="ui large form" action="/logout"  id="logoutForm" method="post"  style="display: none;">
                        <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
                    </form>
                    ${username} &nbsp;&nbsp;<a href="javascript:document.getElementById('logoutForm').submit();">注销</a>
                <#else>
                    <a href="/login" id="loginmodel">登录&nbsp;&nbsp;&&nbsp;&nbsp;注册</a>
                </#if>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript" charset="UTF-8" src="/static/js/user/header.js"></script>
<script>
(function() {
    var saved = localStorage.getItem('jiscuss-theme') || 'light';
    if (saved === 'dark') { document.documentElement.setAttribute('data-theme', 'dark'); }
    document.addEventListener('DOMContentLoaded', function() {
        var btn = document.getElementById('themeToggle');
        var icon = document.getElementById('themeIcon');
        function applyTheme(t) {
            if (t === 'dark') {
                document.documentElement.setAttribute('data-theme', 'dark');
                icon.className = 'sun icon';
            } else {
                document.documentElement.removeAttribute('data-theme');
                icon.className = 'moon icon';
            }
        }
        applyTheme(saved);
        if (btn) {
            btn.onclick = function() {
                var current = localStorage.getItem('jiscuss-theme') || 'light';
                var next = current === 'dark' ? 'light' : 'dark';
                localStorage.setItem('jiscuss-theme', next);
                applyTheme(next);
            };
        }
        // Fetch unread counts and update header badges
        function updateBadges() {
            $.get('/msg_api/unread-counts', function(resp) {
                if (!resp || resp.code !== 10000) return;
                var d = resp.data || {};
                var notifBadge = document.getElementById('headerNotifBadge');
                var msgBadge = document.getElementById('headerMsgBadge');
                if (notifBadge) {
                    if (d.notifications > 0) { notifBadge.textContent = d.notifications > 99 ? '99+' : d.notifications; notifBadge.style.display = ''; }
                    else { notifBadge.style.display = 'none'; }
                }
                if (msgBadge) {
                    if (d.messages > 0) { msgBadge.textContent = d.messages > 99 ? '99+' : d.messages; msgBadge.style.display = ''; }
                    else { msgBadge.style.display = 'none'; }
                }
            });
        }
        if (document.getElementById('headerNotifBadge')) {
            updateBadges();
            setInterval(updateBadges, 60000); // refresh every 60s
        }
    });
})();
</script>