{{define "theme-angel-kanade/menu"}}
<div id="app">
<div class="ui large top fixed menu nb-menu">
    <div class="ui container">
        <a class="item" href="/">
            <img class="ui" style="height: 2rem" src="/static/logo.svg?v20210804">
        </a>
        {{if .IsAdminPage}}
        <a class='item{{if eq .MatchedPath "/server"}} active{{end}}' href="/server"><i class="server icon"></i>{{tr "Server"}}</a>
        <a class='item{{if eq .MatchedPath "/monitor"}} active{{end}}' href="/monitor"><i class="rss icon"></i>{{tr "Services"}}</a>
        <a class='item{{if eq .MatchedPath "/cron"}} active{{end}}' href="/cron"><i class="clock icon"></i>{{tr "Task"}}</a>
        <a class='item{{if eq .MatchedPath "/notification"}} active{{end}}' href="/notification"><i class="bell icon"></i>{{tr "Notification"}}</a>
        <a class='item{{if eq .MatchedPath "/setting"}} active{{end}}' href="/setting">
            <i class="settings icon"></i>{{tr "Settings"}}
        </a>
        {{else}}
        <a class='item{{if eq .MatchedPath "/"}} active{{end}}' href="/"><i class="home icon"></i>{{tr "Home"}}</a>
        <a class='item{{if eq .MatchedPath "/service"}} active{{end}}' href="/service"><i class="rss icon"></i>{{tr "Services"}}</a>
            {{ if not .Conf.DisableSwitchTemplateInFrontend }}        
            <div class="item ui simple dropdown">
                <div class="text"><i class="bi bi-incognito icon" style="margin-right:3px;"></i>{{tr "Template" }}<i class="dropdown icon" style="margin-right:0px;"></i></div>
                <div class="menu"> 
                    <a v-for="(item, index) in adaptedTemplates" :key="index" @click="toggleTemplate(item.key)" class="item">
                        <i :class="item.icon + ' icon'"></i>@#item.name#@
                        <i class="check icon" v-if="preferredTemplate === item.key"></i>
                    </a>
                </div>
            </div>
            {{ end }}
        {{end}}
        <div class="right menu">
            <div class="item">
                {{if .Admin}}
                <div class="ui simple dropdown">
                    <div class="text">
                        <img class="ui avatar image" src="{{.Admin.AvatarURL}}"> {{.Admin.Name}}
                    </div>
                    <i class="dropdown icon"></i>
                    <div class="menu">
                        {{if .IsAdminPage}}
                        <a class="item" href="/">
                            <i class="chart area icon"></i>{{tr "BackToHomepage"}}
                        </a>
                        <a class="item" href="/api">
                            <i class="chart key icon"></i>API Token
                        </a>
                        {{else}}
                        <a class="item" href="/server">
                            <i class="terminal icon"></i>{{tr "AdminPanel"}}
                        </a>
                        {{end}}
                        <button class="item" onclick="showConfirm('{{tr "ConfirmLogout"}}','{{tr "AfterLoggingOutYouHaveToLoginAgain"}}',logout,{{.Admin.ID}})">
                            <i class="logout icon"></i>{{tr "Logout"}}
                        </button>
                    </div>
                </div>
                {{else}}
                <a href="/login" class="ui large positive nezha-primary-btn button"><i class="sign-in icon"></i>{{tr "Login"}}</a>
                {{end}}
            </div>
        </div>
    </div>
</div>
{{template "component/confirm" .}}
{{end}}