{{/*
  顶部导航（nav.html）

  版式：Logo 左，右侧一组「栏目 + 搜索 + 领券 + 购物车 + 语言 + 登录」整体右对齐。

  🚨 **栏目与购物车必须同一个 ml-auto 分组**：原来用 `justify-between` 平铺，
  子项会被均匀撒开 —— 栏目数一变（运营加一个栏目）整条导航的间距就整体重排，
  购物车位置跟着漂。收进同一个右对齐组后，栏目和购物车的相对位置恒定，
  新增栏目只会让整组向左长。

  🚨 顶栏（公告条）只用 `.ThemesExt` 的 topbar_text / topbar_phone，
  不写死文案：商城的促销口径（满额包邮、新人立减）是按活动换的，
  写死就得改模板才能改文案。
*/}}
{{$ext := .ThemesExt}}
{{$isHome := eq .Type "home"}}
{{$topText := index $ext "topbar_text"}}
{{$topPhone := index $ext "topbar_phone"}}

{{if or $topText $topPhone}}
<div class="bg-slate-900 text-slate-300">
  <div class="vm-container flex h-9 items-center justify-between gap-4 text-xs">
    <p class="truncate">{{with $topText}}{{.}}{{end}}</p>
    <div class="flex shrink-0 items-center gap-5">
      {{if .ShopEnabled}}
      <a href="/orders" class="transition-colors hover:text-white">我的订单</a>
      {{end}}
      {{with $topPhone}}
      <span class="hidden sm:inline">服务热线 <span class="font-semibold text-white">{{.}}</span></span>
      {{end}}
    </div>
  </div>
</div>
{{end}}

<nav class="sticky top-0 z-50 border-b border-slate-200 bg-white/95 backdrop-blur">
  <div class="vm-container">
    <div class="flex h-16 items-center gap-2">
      {{/* ---------------------------------------------------------- 站点标识（左） */}}
      <a href="/" class="flex shrink-0 items-center gap-2" aria-label="{{if .Site}}{{.Site.Title}}{{else}}首页{{end}}">
        {{if .Site.Logo}}
        <img src="{{.Site.Logo}}" alt="{{.Site.Title}}" class="h-9 w-auto object-contain">
        {{else}}
        <img src="/static/images/logo.webp" alt="{{if .Site}}{{.Site.Title}}{{else}}企业官网{{end}}" class="h-9 w-auto object-contain">
        {{end}}
        {{if index $ext "show_site_name"}}
        <span class="hidden sm:block text-base font-bold text-slate-900">{{.Site.Title}}</span>
        {{end}}
      </a>

      {{/* ------------------------------------------------ 右侧组（栏目 + 购物车 …） */}}
      <div class="ml-auto flex items-center gap-1">

        {{/* 栏目：与购物车同组，一起右对齐。
            ⚠️ 「首页」在模板里显式给出， range 里要跳过 slug 为 / 的栏目，
            否则站点把首页建成栏目时会出现两个「首页」同时高亮。 */}}
        <ul class="hidden lg:flex items-center gap-0.5">
          <li>
            <a href="/" class="vm-nav-link {{if $isHome}}is-active{{end}}">首页</a>
          </li>
          {{range .Columns}}
          {{if ne .URL "/"}}
          <li class="relative group">
            <a href="{{.URL}}"
               class="vm-nav-link {{if .IsSelect}}is-active{{end}}"
               {{if .Children}}aria-haspopup="true"{{end}}>
              <span>{{.Name}}</span>
              {{if .Children}}
              <svg class="h-3.5 w-3.5 opacity-70 transition-transform duration-150 group-hover:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
              </svg>
              {{end}}
            </a>
            {{if .Children}}
            <div class="invisible opacity-0 group-hover:visible group-hover:opacity-100 group-focus-within:visible group-focus-within:opacity-100
                        transition-all duration-150 absolute right-0 top-full pt-2 min-w-[12rem]">
              <div class="rounded-xl border border-slate-100 bg-white py-1 shadow-lg">
                {{range .Children}}
                <a href="{{.URL}}"
                   class="block px-4 py-2.5 text-sm text-slate-700 hover:bg-slate-50 hover:text-primary {{if .IsSelect}}text-primary font-semibold{{end}}">
                  {{.Name}}
                </a>
                {{if .Children}}
                {{range .Children}}
                <a href="{{.URL}}"
                   class="block pl-7 pr-4 py-2 text-[13px] text-slate-500 hover:bg-slate-50 hover:text-primary {{if .IsSelect}}text-primary font-semibold{{end}}">
                  {{.Name}}
                </a>
                {{end}}
                {{end}}
                {{end}}
              </div>
            </div>
            {{end}}
          </li>
          {{end}}
          {{end}}
        </ul>

        {{/* 搜索：商城的必备入口，只在最宽断点出现（窄屏放不下会挤走栏目） */}}
        <form action="/search" method="get" role="search" class="hidden xl:block ml-2">
          <label for="nav-search" class="sr-only">搜索商品与资讯</label>
          <div class="relative">
            <input id="nav-search" type="search" name="key" placeholder="搜索商品 / 资讯"
                   class="h-10 w-44 rounded-xl border border-slate-200 bg-slate-50 pl-9 pr-3 text-sm text-slate-700 placeholder:text-slate-400 focus:border-primary focus:bg-white focus:outline-none">
            <svg class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35M17 10a7 7 0 11-14 0 7 7 0 0114 0z"/>
            </svg>
          </div>
        </form>

        <span class="mx-1 hidden h-5 w-px bg-slate-200 lg:block" aria-hidden="true"></span>

        {{/*
          领券中心。
          🚨 `/coupons` 页面早就存在，但导航里一个入口都没有 —— 用户只能手输 URL。
          放在购物车旁边而不是用户下拉里：券是高频入口（下单前要看有没有券可用）。
        */}}
        {{if .ShopEnabled}}
        <a href="/coupons" class="vm-icon-btn" aria-label="{{if .User.LoggedIn}}我的优惠券{{else}}领券中心{{end}}" title="{{if .User.LoggedIn}}我的优惠券{{else}}领券中心{{end}}">
          <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M15 5v2m0 4v2m0 4v2M5 5h14a2 2 0 0 1 2 2v3a2 2 0 0 0 0 4v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-3a2 2 0 0 0 0-4V7a2 2 0 0 1 2-2z"/>
          </svg>
        </a>
        {{end}}

        {{/*
          购物车。
          ⚠️ 角标数字取自服务端填好的 .Cart（FrontService 在渲染前填），不是前端拉的 ——
          头栏在每个页面都有，多发一次请求不划算，而 .Cart 只有摘要（件数/金额）。
          但**加购后必须由前端改**：.Cart 是渲染那一刻的快照，
          不更新的话用户点完「加入购物车」角标纹丝不动，得刷新才看到。
          更新逻辑在 js.html 的 window.VMCartBadge（全局，商品详情页/购物车页也要用）。
          ⚠️ 「有下架商品」时角标变黄：点进去才发现买不了，体感很差。
          🚨 条件必须同时判 .ShopEnabled 与 .Cart：商城关闭时 .Cart 服务端根本不下发，
          .Cart 为 nil 也可能是「读购物车失败」，那时也不该显示点进去空白的入口。
          ⚠️ id="cart-entry" 是 JS 的定位锚点，不能改 —— VMCartBadge 靠它找入口，
          去掉就会 fallback 到 a[href="/cart"]，而详情页那个「查看购物车」也是 /cart，会挑错。
        */}}
        {{if and .ShopEnabled .Cart}}
        <a href="/cart"
           id="cart-entry"
           class="relative ml-0.5 inline-flex h-10 items-center gap-2 rounded-xl border px-3 text-sm font-semibold transition-colors
                  {{if gt .Cart.TotalQty 0}}border-primary bg-primary/5 text-primary{{else}}border-slate-200 text-slate-600 hover:border-primary hover:text-primary{{end}}"
           aria-label="购物车{{if gt .Cart.TotalQty 0}}（{{.Cart.TotalQty}} 件）{{end}}">
          <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.3 4.6A1 1 0 005 19h12a1 1 0 001-1v-1H7.4"/>
          </svg>
          <span class="hidden sm:inline">购物车</span>
          {{if gt .Cart.TotalQty 0}}
          <span id="cart-badge"
                class="absolute -right-1.5 -top-1.5 min-w-[18px] h-[18px] px-1 rounded-full text-white text-[11px] leading-[18px] text-center
                       {{if .Cart.HasOffShelf}}bg-orange-500{{else}}bg-primary{{end}}">{{.Cart.TotalQty}}</span>
          {{end}}
        </a>
        {{end}}

        {{if and .TranslationEnabled (gt (len .SupportedLangs) 1)}}
        <label for="language-switcher" class="sr-only">选择语言 / Select language</label>
        <select id="language-switcher" class="ml-0.5 h-9 rounded-lg border border-slate-200 bg-white px-2 text-sm text-slate-700 focus:border-primary focus:outline-none" aria-label="选择语言 / Select language">
          {{range .SupportedLangs}}<option translate="no" value="{{.Value}}" {{if eq .Value $.CurrentLang}}selected{{end}}>{{.Label}}</option>{{end}}
        </select>
        {{end}}

        {{/*
          登录态 / 登录注册入口。
          🚨 登录态取 .User（服务端渲染），不用 JS 请求接口：会话在 HttpOnly Cookie 里，
          页面脚本读不到也不该读；导航栏每个页面都有，多发一次请求既慢又没必要。
          🚨 注册入口必须按 .Site.EnableRegister 显示：运营关掉注册后还显示入口，
          用户点进去只会看到「注册已关闭」。
          登录 / 注册链到后台管理页：表单（图形验证码、邮箱验证码、记住密码、OAuth/SSO）
          已在管理端实现并维护，前台再建一套必然漂移。
        */}}
        {{if .User.LoggedIn}}
        <div class="relative ml-0.5" id="nav-user">
          <button type="button" id="nav-user-btn" aria-haspopup="true" aria-expanded="false"
                  class="flex items-center gap-2 rounded-xl px-2 py-1.5 text-sm text-slate-700 hover:bg-slate-50">
            {{if .User.Avatar}}
            <img src="{{.User.Avatar}}" alt="" class="h-7 w-7 rounded-full object-cover">
            {{else}}
            <span class="flex h-7 w-7 items-center justify-center rounded-full bg-primary text-xs font-semibold text-white">我</span>
            {{end}}
            <span class="hidden xl:inline max-w-[7rem] truncate">{{if .User.Nickname}}{{.User.Nickname}}{{else}}{{.User.Username}}{{end}}</span>
            <svg class="h-3 w-3 opacity-60" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
            </svg>
          </button>
          <div id="nav-user-menu" class="hidden absolute right-0 top-full mt-2 w-44 rounded-xl border border-slate-100 bg-white py-1 shadow-lg">
            <div class="px-4 py-2 border-b border-slate-100">
              <p class="text-sm font-medium truncate">{{if .User.Nickname}}{{.User.Nickname}}{{else}}{{.User.Username}}{{end}}</p>
              {{if .User.IsAdmin}}<p class="text-xs text-slate-400 mt-0.5">管理员</p>{{end}}
            </div>
{{/* ---- 入口按身份分流（2026-10-08）----
   此前只有一个写死的「进入后台」，且**对所有登录用户渲染**：
   管理员点进去是工作台，普通会员点进去是会员看板 ——
   同一个链接两种语义，用户只能靠点进去才知道自己在哪。

   现在按身份分开：
   - 管理员：管理后台 + 会员后台（以会员身份预览）
   - 普通会员：会员中心
   ⚠️ 路径一律用 {{.User.AdminPath}} 拼，**不要硬编码 /admin**：
   admin_path 可配置（config.yaml），写死的部署会 404 且不报错。
*/}}
            {{if .ShopEnabled}}
            <a href="/orders" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-50">我的订单</a>
            {{/* 券入口在下拉里也放一份：移动端把顶部图标藏起来后，下拉是唯一入口 */}}
            <a href="/coupons" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-50">我的优惠券</a>
            {{end}}
            {{if .User.IsAdmin}}
            <a href="{{.User.AdminPath}}" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-50">管理后台</a>
            {{/* 管理员进会员区：这里进的是**管理员自己的会员视角**
                 （看他自己有没有积分/订单，不是看别人的）。

                 ⚠️ 它能进去，是因为「会员区路由不向管理员注册」只作用于
                 **SPA 侧边栏菜单**（menuRoleFilter.filterMenuByRoles 的输出
                 同时用于菜单与注册）。管理员是**直接敲 URL 进来**的，
                 不依赖菜单，所以照常渲染会员看板组件。
                 后端 /api/member/* 只要求 RequireLogin，不校验 is_admin。

                 将来若有人把会员区改成「管理员完全不可达」，
                 这个链接会 404 —— 改这里之前先看 menuRoleFilter.ts。 */}}
            <a href="{{.User.AdminPath}}#/member/dashboard" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-50">会员后台</a>
            {{else}}
            <a href="{{.User.AdminPath}}#/member/dashboard" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-50">会员中心</a>
            {{end}}
            <button type="button" id="nav-logout" class="w-full text-left px-4 py-2 text-sm text-red-500 hover:bg-red-50">退出登录</button>
          </div>
        </div>
        {{else}}
        <div class="ml-0.5 flex items-center gap-1">
          <a href="{{.User.AdminPath}}#/auth/login" class="vm-btn vm-btn-light vm-btn-sm">登录</a>
          {{if eq .Site.EnableRegister 1}}
          <a href="{{.User.AdminPath}}#/auth/register" class="vm-btn vm-btn-primary vm-btn-sm">注册</a>
          {{end}}
        </div>
        {{end}}

        {{/* 汉堡：只在窄屏出现（断点与栏目列表一致，避免两侧都不显示） */}}
        <button id="mobile-menu-btn" type="button"
                class="ml-0.5 flex h-10 w-10 items-center justify-center rounded-lg text-slate-600 hover:bg-slate-50 lg:hidden"
                aria-label="打开导航菜单" aria-expanded="false">
          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
          </svg>
        </button>
      </div>
    </div>
  </div>

  {{/* ------------------------------------------------------------- 移动端抽屉 */}}
  <div id="mobile-menu" class="hidden border-t border-slate-100 bg-white lg:hidden">
    <div class="vm-container py-3">
      {{/* 🚨 移动端同样要给搜索：手机用户没有桌面搜索框，也常常是主要的找货方式 */}}
      <form action="/search" method="get" role="search" class="mb-3">
        <label for="mobile-search" class="sr-only">搜索商品与资讯</label>
        <input id="mobile-search" type="search" name="key" placeholder="搜索商品 / 资讯"
               class="vm-input h-11 rounded-xl bg-slate-50">
      </form>

      <div class="space-y-0.5">
        <a href="/" class="block rounded-lg px-3 py-2.5 text-base font-medium {{if $isHome}}bg-primary/5 text-primary{{else}}text-slate-700 hover:bg-slate-50{{end}}">首页</a>
        {{range .Columns}}
        {{if ne .URL "/"}}
        <div>
          <a href="{{.URL}}" class="block rounded-lg px-3 py-2.5 text-base font-medium {{if .IsSelect}}bg-primary/5 text-primary{{else}}text-slate-700 hover:bg-slate-50{{end}}">{{.Name}}</a>
          {{if .Children}}
          <div class="ml-3 border-l border-slate-100 pl-2">
            {{range .Children}}
            <a href="{{.URL}}" class="block rounded-lg px-3 py-2 text-sm {{if .IsSelect}}text-primary font-medium{{else}}text-slate-500 hover:text-primary{{end}}">{{.Name}}</a>
            {{if .Children}}
            {{range .Children}}
            <a href="{{.URL}}" class="block rounded-lg pl-6 pr-3 py-1.5 text-[13px] {{if .IsSelect}}text-primary{{else}}text-slate-400 hover:text-primary{{end}}">{{.Name}}</a>
            {{end}}
            {{end}}
            {{end}}
          </div>
          {{end}}
        </div>
        {{end}}
        {{end}}
      </div>

      {{/*
        移动端菜单里的登录态入口。
        ⚠️ PC 端那份在上面的横排导航里，移动端是**另一个 DOM 树**，
        只做一边的话手机用户完全看不到登录入口 —— 「只改一半」在响应式布局里特别常见。
      */}}
      <div class="mt-3 border-t border-slate-100 pt-3">
        {{if .User.LoggedIn}}
        <div class="flex items-center justify-between px-3 py-2">
          <span class="truncate text-sm text-slate-700">{{if .User.Nickname}}{{.User.Nickname}}{{else}}{{.User.Username}}{{end}}</span>
          <button type="button" class="text-sm text-red-500" data-nav-logout>退出登录</button>
        </div>
        {{if .ShopEnabled}}
        <div class="flex gap-2 px-3 pb-1">
          <a href="/orders" class="vm-btn vm-btn-light vm-btn-sm flex-1">我的订单</a>
          <a href="/coupons" class="vm-btn vm-btn-light vm-btn-sm flex-1">我的优惠券</a>
        </div>
        {{end}}
        {{/* 后台入口（2026-10-08 补）。
           此前移动端**完全没有**后台入口 —— PC 端有、手机没有，
           而顶栏图标在窄屏会被藏起来，于是手机用户根本进不去后台。
           这类「只改了一半」的响应式缺口很容易漏，因为 PC 端看起来是好的。
           同样按身份分流，且路径用 {{.User.AdminPath}} 而非硬编码。 */}}
        {{if .User.IsAdmin}}
        <div class="flex gap-2 px-3 pb-1">
          <a href="{{.User.AdminPath}}" class="vm-btn vm-btn-light vm-btn-sm flex-1">管理后台</a>
          <a href="{{.User.AdminPath}}#/member/dashboard" class="vm-btn vm-btn-light vm-btn-sm flex-1">会员后台</a>
        </div>
        {{else}}
        <div class="flex gap-2 px-3 pb-1">
          <a href="{{.User.AdminPath}}#/member/dashboard" class="vm-btn vm-btn-light vm-btn-sm flex-1">会员中心</a>
        </div>
        {{end}}
        {{else}}
        <div class="flex gap-2 px-3 pb-1">
          <a href="{{.User.AdminPath}}#/auth/login" class="vm-btn vm-btn-light flex-1">登录</a>
          {{if eq .Site.EnableRegister 1}}
          <a href="{{.User.AdminPath}}#/auth/register" class="vm-btn vm-btn-primary flex-1">注册</a>
          {{end}}
        </div>
        {{end}}
      </div>
    </div>
  </div>
</nav>

<script>
  (() => {
    const languageSwitcher = document.getElementById('language-switcher')
    languageSwitcher?.addEventListener('change', (event) => {
      const url = new URL(window.location.href)
      url.searchParams.set('lang', event.target.value)
      window.location.href = url.toString()
    })
    const current = new URL(window.location.href).searchParams.get('lang')
    if (current) {
      document.addEventListener('click', (event) => {
        const anchor = event.target.closest('a')
        if (!anchor || anchor.target === '_blank' || anchor.hasAttribute('download')) return
        const target = new URL(anchor.href, window.location.href)
        if (target.origin !== window.location.origin || target.protocol !== window.location.protocol) return
        target.searchParams.set('lang', current)
        anchor.href = target.toString()
      })
    }
  })()
</script>

<script>
  (() => {
    const btn = document.getElementById('mobile-menu-btn')
    const menu = document.getElementById('mobile-menu')
    if (!btn || !menu) return
    btn.addEventListener('click', () => {
      const open = menu.classList.toggle('hidden') === false
      btn.setAttribute('aria-expanded', String(open))
    })
  })()
</script>

<script>
  // 导航栏登录态交互（用户菜单下拉 + 退出登录）。
  //
  // ⚠️ 退出走 **POST /api/sys/logout** 而不是直接删 Cookie：
  // 服务端要同时把会话从它的续期/黑名单里摘掉，只清浏览器 Cookie 的话
  // 凭证在有效期内仍然能用。
  (function () {
    var wrap = document.getElementById('nav-user');
    var btn = document.getElementById('nav-user-btn');
    var menu = document.getElementById('nav-user-menu');
    var logout = document.getElementById('nav-logout');
    if (!wrap || !btn || !menu) return;

    btn.addEventListener('click', function (e) {
      e.stopPropagation();
      var open = menu.classList.toggle('hidden') === false;
      btn.setAttribute('aria-expanded', String(open));
    });

    // 点外部关闭：用户点了别处却还开着菜单会挡住内容。
    document.addEventListener('click', function (e) {
      if (!wrap.contains(e.target)) menu.classList.add('hidden');
    });

    if (logout) logout.addEventListener('click', doLogout);

    // ⚠️ 移动端菜单是**另一棵 DOM 树**（在 #mobile-menu 里），
    // 上面那个 #nav-logout 绑不到它。这里的按钮用 data 属性选中，
    // 逐个绑定同一个处理函数 —— 漏了的话手机端退出登录就是死的。
    document.querySelectorAll('[data-nav-logout]').forEach(function (el) {
      el.addEventListener('click', doLogout);
    });

    function doLogout() {
      if (!confirm('确定要退出登录吗？')) return;
      fetch('/api/sys/logout', {
        method: 'POST',
        credentials: 'same-origin',
        headers: { 'Content-Type': 'application/json' }
      })
        .then(function (r) { return r.json(); })
        .then(function (j) {
          if (j && j.code === 200) {
            // 回首页而不是 reload 当前页：当前页可能已按登录态渲染过
            //（比如会员中心），留在原地会显示一份过期的「已登录」界面。
            window.location.href = '/';
          } else {
            alert((j && (j.message || j.msg)) || '退出失败，请重试');
          }
        })
        .catch(function () { alert('网络错误，请稍后重试'); });
    }
  })();
</script>