{{/*
  顶部导航（nav.html）—— 小米商城版式：

  · 深色服务条（公告 / 我的订单 / 服务热线）；
  · 白色主导航：Logo 左，栏目 + 搜索 + 券 + 购物车 + 语言 + 登录 整体右对齐。

  🚨 栏目与购物车必须同一个 ml-auto 分组：栏目数一变（运营加栏目）
  导航间距不能整体重排，购物车位置要恒定。

  🚨 购物车入口判 and .ShopEnabled .Cart 双保险（.Cart 为 nil 也可能是
  「读购物车失败」，那时不该显示一个点进去空白的入口）。
  ⚠️ id="cart-entry" / id="cart-badge" 是 js.html 全局脚本的定位锚点，不能改。
*/}}
{{$ext := .ThemesExt}}
{{$isHome := eq .Type "home"}}
{{$topText := index $ext "topbar_text"}}
{{$topPhone := index $ext "topbar_phone"}}

{{if or $topText $topPhone}}
<div class="bg-[#333333] text-[#b0b0b0]">
  <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 bg-white/95 backdrop-blur">
  <div class="vm-container">
    <div class="flex h-14 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-8 w-auto object-contain">
        {{else}}
        <img src="/static/images/logo.webp" alt="{{if .Site}}{{.Site.Title}}{{else}}电子商城{{end}}" class="h-8 w-auto object-contain">
        {{end}}
        {{if index $ext "show_site_name"}}
        <span class="hidden sm:block text-base font-semibold text-[#1a1a1a]">{{.Site.Title}}</span>
        {{end}}
      </a>

      {{/*
        全部商品分类（小米导航左端的「分类」入口）—— hover / 点击展开整块面板，
        列出「全部商品」栏目下的子栏目。桌面端才渲染：窄屏放不下，
        移动端走抽屉里那棵树（同一份 .Columns 数据，不会漏栏目）。
        ⚠️ 子栏目为空时整个入口不渲染，避免点开一个空面板。
      */}}
      {{$pslug := default "products" (index $ext "product_slug")}}
      {{$navProdCol := ""}}
      {{range .Columns}}{{if eq .Slug $pslug}}{{$navProdCol = .}}{{end}}{{end}}
      {{if and $navProdCol $navProdCol.Children}}
      <div class="relative hidden lg:block" id="nav-cat">
        <button type="button" id="nav-cat-btn" aria-haspopup="true" aria-expanded="false"
                class="flex h-14 items-center gap-1.5 px-3 text-[15px] font-medium text-[#1a1a1a] transition-colors hover:text-primary">
          <svg class="h-4 w-4" 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 id="nav-cat-panel"
             class="invisible absolute left-0 top-full z-50 w-[44rem] translate-y-1 rounded-b-lg bg-white p-6 opacity-0 shadow-[0_12px_32px_rgba(0,0,0,.14)] transition-all duration-150">
          <div class="grid grid-cols-3 gap-x-8 gap-y-1">
            {{range $navProdCol.Children}}
            <a href="{{.URL}}" class="flex items-center justify-between rounded px-3 py-2 text-sm text-[#555] transition-colors hover:bg-[#f5f5f5] hover:text-primary">
              <span>{{.Name}}</span>
            </a>
            {{end}}
          </div>
          <div class="mt-4 border-t border-[#f0f0f0] pt-4">
            <a href="{{$navProdCol.URL}}" class="text-sm font-medium text-primary hover:underline">查看全部商品 →</a>
          </div>
        </div>
      </div>
      {{end}}

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

        <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 里跳过 slug 为 / 的栏目，避免重复 */}}
          {{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 w-3 opacity-60 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-1 min-w-[11rem]">
              <div class="rounded-md bg-white py-1 shadow-[0_8px_24px_rgba(0,0,0,.12)]">
                {{range .Children}}
                <a href="{{.URL}}"
                   class="block px-4 py-2.5 text-sm text-[#555] hover:bg-[#f5f5f5] hover:text-primary {{if .IsSelect}}text-primary font-medium{{end}}">
                  {{.Name}}
                </a>
                {{if .Children}}
                {{range .Children}}
                <a href="{{.URL}}"
                   class="block pl-7 pr-4 py-2 text-[13px] text-[#999] hover:bg-[#f5f5f5] hover:text-primary {{if .IsSelect}}text-primary font-medium{{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-9 w-44 rounded border border-[#e0e0e0] bg-[#f5f5f5] pl-8 pr-3 text-sm text-[#555] placeholder:text-[#b0b0b0] focus:border-primary focus:bg-white focus:outline-none">
            <svg class="pointer-events-none absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-[#b0b0b0]" 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-[#e6e6e6] lg:block" aria-hidden="true"></span>

        {{/* 领券中心：券是高频入口（下单前要看有没有券可用） */}}
        {{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 快照，加购后由 js.html 的
          window.VMCartBadge 全局函数同步。「有下架商品」时角标变黄。
          🚨 条件必须同时判 .ShopEnabled 与 .Cart。
        */}}
        {{if and .ShopEnabled .Cart}}
        <a href="/cart"
           id="cart-entry"
           class="relative ml-0.5 inline-flex h-9 items-center gap-1.5 rounded px-3 text-sm font-medium transition-colors
                  {{if gt .Cart.TotalQty 0}}text-primary{{else}}text-[#616161] 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 min-w-[17px] h-[17px] px-1 rounded-full text-white text-[11px] leading-[17px] 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-8 rounded border border-[#e0e0e0] bg-white px-2 text-sm text-[#555] 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（服务端渲染）。
          注册入口按 .Site.EnableRegister 显示。登录/注册链到管理端表单页。
        */}}
        {{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 px-2 py-1.5 text-sm text-[#555] hover:bg-[#f5f5f5]">
            {{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-1 w-44 rounded-md bg-white py-1 shadow-[0_8px_24px_rgba(0,0,0,.12)]">
            <div class="px-4 py-2 border-b border-[#f0f0f0]">
              <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-[#999] mt-0.5">管理员</p>{{end}}
            </div>
            {{if .ShopEnabled}}
            <a href="/orders" class="block px-4 py-2 text-sm text-[#555] hover:bg-[#f5f5f5]">我的订单</a>
            <a href="/coupons" class="block px-4 py-2 text-sm text-[#555] hover:bg-[#f5f5f5]">我的优惠券</a>
            {{end}}
            {{if .User.IsAdmin}}
            <a href="{{.User.AdminPath}}" class="block px-4 py-2 text-sm text-[#555] hover:bg-[#f5f5f5]">管理后台</a>
            <a href="{{.User.AdminPath}}#/member/dashboard" class="block px-4 py-2 text-sm text-[#555] hover:bg-[#f5f5f5]">会员后台</a>
            {{else}}
            <a href="{{.User.AdminPath}}#/member/dashboard" class="block px-4 py-2 text-sm text-[#555] hover:bg-[#f5f5f5]">会员中心</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-line 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 text-[#616161] hover:bg-[#f5f5f5] 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-[#f0f0f0] 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 bg-[#f5f5f5]">
      </form>

      <div class="space-y-0.5">
        <a href="/" class="block rounded px-3 py-2.5 text-base font-medium {{if $isHome}}bg-[#fff5ed] text-primary{{else}}text-[#555] hover:bg-[#f5f5f5]{{end}}">首页</a>
        {{range .Columns}}
        {{if ne .URL "/"}}
        <div>
          <a href="{{.URL}}" class="block rounded px-3 py-2.5 text-base font-medium {{if .IsSelect}}bg-[#fff5ed] text-primary{{else}}text-[#555] hover:bg-[#f5f5f5]{{end}}">{{.Name}}</a>
          {{if .Children}}
          <div class="ml-3 border-l border-[#f0f0f0] pl-2">
            {{range .Children}}
            <a href="{{.URL}}" class="block rounded px-3 py-2 text-sm {{if .IsSelect}}text-primary font-medium{{else}}text-[#999] hover:text-primary{{end}}">{{.Name}}</a>
            {{if .Children}}
            {{range .Children}}
            <a href="{{.URL}}" class="block rounded pl-6 pr-3 py-1.5 text-[13px] {{if .IsSelect}}text-primary{{else}}text-[#b0b0b0] hover:text-primary{{end}}">{{.Name}}</a>
            {{end}}
            {{end}}
            {{end}}
          </div>
          {{end}}
        </div>
        {{end}}
        {{end}}
      </div>

      {{/* 移动端菜单里的登录态入口：PC 端那份在横排导航里，移动端是另一棵 DOM 树，
          只做一边的话手机用户完全看不到登录入口。 */}}
      <div class="mt-3 border-t border-[#f0f0f0] pt-3">
        {{if .User.LoggedIn}}
        <div class="flex items-center justify-between px-3 py-2">
          <span class="truncate text-sm text-[#555]">{{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}}
        {{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 的话凭证在有效期内仍然能用。
  (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 树，用 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) {
            window.location.href = '/';
          } else {
            alert((j && (j.message || j.msg)) || '退出失败，请重试');
          }
        })
        .catch(function () { alert('网络错误，请稍后重试'); });
    }
  })();
</script>

<script>
  // 「全部商品分类」面板：hover 进、hover 出延时关闭，同时支持点击切换（触屏/键盘可达）。
  // 用 class 切换而不是直接写 style，过渡交给 CSS（可见性 + 位移 + 透明度一起动）。
  (function () {
    var wrap = document.getElementById('nav-cat');
    var btn = document.getElementById('nav-cat-btn');
    var panel = document.getElementById('nav-cat-panel');
    if (!wrap || !btn || !panel) return;

    var timer = null;
    function open() {
      if (timer) { clearTimeout(timer); timer = null; }
      panel.classList.remove('invisible', 'opacity-0', 'translate-y-1');
      btn.setAttribute('aria-expanded', 'true');
    }
    function close() {
      panel.classList.add('invisible', 'opacity-0', 'translate-y-1');
      btn.setAttribute('aria-expanded', 'false');
    }
    function delayedClose() {
      if (timer) clearTimeout(timer);
      timer = setTimeout(close, 160);
    }

    wrap.addEventListener('mouseenter', open);
    wrap.addEventListener('mouseleave', delayedClose);
    btn.addEventListener('click', function (e) {
      e.stopPropagation();
      if (panel.classList.contains('invisible')) { open(); } else { close(); }
    });
    document.addEventListener('click', function (e) {
      if (!wrap.contains(e.target)) close();
    });
    document.addEventListener('keydown', function (e) {
      if (e.key === 'Escape') close();
    });
  })();
</script>