{{define "header"}}
<link rel="stylesheet" href="/static/css/header.css?v=13" />
<header class="site-header">
  <div class="header-inner">
    <button
      class="header-menu-button"
      type="button"
      aria-label="打开导航菜单"
      aria-controls="homeMobileMenu"
      aria-expanded="false"
      hidden
    >
      <img src="/static/images/figma-home/mobile/menu.svg" alt="" />
    </button>
    <a class="brand-lockup" href="/" data-nav-key="home" data-nav-name="首页">
      <img class="brand-logo" src="/static/images/logo.png" alt="黄果短剧" title="黄果短剧" />
    </a>

    <div class="header-nav">
      {{range .headerNav}} {{if .IsDownload}} {{if $.appConfig.AppAddr}}
      <a
        class="{{if .IsActive}}nav-link-active{{else}}nav-link{{end}}"
        href="{{$.appConfig.AppAddr}}"
        target="_blank"
        rel="sponsored nofollow noopener noreferrer"
        data-download-app-open
        data-download-app-url="{{$.appConfig.AppAddr}}"
        data-nav-key="{{.Key}}"
        data-nav-name="{{.Name}}"
        {{if .IsActive}}aria-current="page"{{end}}
        >{{.Name}}</a
      >
      {{end}} {{else if .IsExternal}}
      <a
        class="{{if .IsActive}}nav-link-active{{else}}nav-link{{end}}"
        href="{{.Href}}"
        target="_blank"
        rel="sponsored nofollow noopener noreferrer"
        data-nav-key="{{.Key}}"
        data-nav-name="{{.Name}}"
        {{if .IsActive}}aria-current="page"{{end}}
        >{{.Name}}</a
      >
      {{else}}
      <a
        class="{{if .IsActive}}nav-link-active{{else}}nav-link{{end}}"
        href="{{.Href}}"
        data-nav-key="{{.Key}}"
        data-nav-name="{{.Name}}"
        {{if .IsActive}}aria-current="page"{{end}}
        >{{.Name}}</a
      >
      {{end}} {{end}}
    </div>

    <div class="header-gap"></div>

    <form class="header-search" action="/search/" method="get">
      <img
        class="search-icon-wrap search-icon-wrap--pc"
        src="/static/images/search.svg"
        alt="搜索"
      />
      <input
        class="search-input"
        type="search"
        name="q"
        value="{{if .query}}{{.query}}{{end}}"
        placeholder="{{if eq .navActive "home"}}搜索你感兴趣的内容{{else}}搜索剧名、题材或标签{{end}}"
        autocomplete="off"
        aria-controls="headerSearchPopover"
        aria-expanded="false"
      />
    </form>

    <a class="header-mobile-search-link" href="/search/" aria-label="前往搜索页" data-nav-key="search" data-nav-name="搜索">
      <img src="/static/images/figma-home/mobile/search.svg" width="16" height="16" alt="" />
    </a>

    <a class="header-design-coin" href="/deposit/" aria-label="会员充值" data-nav-key="deposit" data-nav-name="会员充值" hidden>
      <img src="/static/images/figma-home/header-coin.png" width="56" height="56" alt="" />
    </a>
    <div class="header-design-separator" aria-hidden="true" hidden></div>

    <a
      class="header-app-icon"
      href="/deposit/"
      aria-label="会员充值"
      data-nav-key="deposit"
      data-nav-name="会员充值"
      data-header-vip{{if
      not
      .isVip}}
      hidden{{end}}
    >
      <img src="/static/images/isVip.png" alt="VIP会员" />
    </a>
    <div
      class="header-separator"
      data-header-vip-sep{{if
      not
      .isVip}}
      hidden{{end}}
    ></div>

    <a
      class="header-account"
      href="{{if .isLoggedIn}}/user-center/{{else}}#login{{end}}"
      data-header-account{{if
      not
      .isLoggedIn}}
      data-login-dialog-open{{end}}
      data-nav-key="{{if .isLoggedIn}}user_center{{else}}login{{end}}"
      data-nav-name="{{if .isLoggedIn}}个人中心{{else}}登录{{end}}"
    >
      {{if .isLoggedIn}} {{if .avatar}}
      <img
        class="account-avatar-photo lazy"
        src="/static/images/placeholder.png?v=2"
        data-src="{{.avatar}}"
        alt="{{if .userName}}{{.userName}}{{else}}用户{{end}}的头像"
        data-header-avatar
      />
      {{else}}
      <img
        class="account-avatar-photo"
        src="/static/images/avatar.png"
        alt="{{if .userName}}{{.userName}}{{else}}用户{{end}}的默认头像"
        data-header-avatar
      />
      {{end}}
      <div class="account-label account-label--logged" data-header-username>
        {{if .userName}}{{.userName}}{{else}}用户{{end}}
      </div>
      {{else}}
      <div class="account-avatar" data-header-guest-avatar>
        <img
          class="account-avatar-ring"
          src="/static/images/avatar.png"
          alt="未登录用户头像"
        />
        <div class="account-avatar-body"></div>
        <div class="account-avatar-head"></div>
      </div>
      <div class="account-label" data-header-username>未登录</div>
      {{end}}
    </a>
  </div>
</header>

<aside
  class="header-search-popover"
  id="headerSearchPopover"
  data-header-search-popover
  role="dialog"
  aria-modal="false"
  aria-labelledby="headerSearchHistoryTitle"
  hidden
>
  <section class="header-search-history">
    <div class="header-search-popover-heading">
      <h3 id="headerSearchHistoryTitle">搜索记录</h3>
      <div class="header-search-popover-actions">
        <button type="button" class="header-search-clear" data-search-history-clear>清除</button>
        <button type="button" class="header-search-close" data-header-search-close aria-label="关闭搜索推荐">
          <img src="/static/images/figma-search/search-popover-close.svg" width="20" height="20" alt="" />
        </button>
      </div>
    </div>
    <div class="header-search-history-tags" data-search-history-list></div>
  </section>

  <div class="header-search-popover-divider" aria-hidden="true"></div>

  <section class="header-search-hot" aria-labelledby="headerSearchHotTitle">
    <h3 id="headerSearchHotTitle">热搜榜</h3>
    <div class="header-search-hot-list" data-search-hot-list aria-live="polite"></div>
  </section>

  <div class="header-search-popover-divider" aria-hidden="true"></div>

  <section class="header-search-guess" aria-labelledby="headerSearchGuessTitle">
    <div class="header-search-popover-heading">
      <h3 id="headerSearchGuessTitle">猜你喜欢</h3>
      <button type="button" class="header-search-change" data-search-guess-change>换一换</button>
    </div>
    <div class="header-search-guess-list" data-search-guess-list aria-live="polite"></div>
  </section>
</aside>

<div class="home-mobile-menu" id="homeMobileMenu" hidden>
  <button class="home-mobile-menu-backdrop" type="button" data-home-menu-close aria-label="关闭导航菜单"></button>
  <aside class="home-mobile-menu-panel" role="dialog" aria-modal="true" aria-label="站点导航">
    <button class="home-mobile-menu-close" type="button" data-home-menu-close aria-label="关闭导航菜单">
      <img src="/static/images/figma-home/mobile/drawer-close.svg" width="24" height="24" alt="" />
    </button>
    <a class="home-mobile-menu-logo" href="/" aria-label="黄果短剧首页" data-nav-key="home" data-nav-name="首页">
      <img src="/static/images/figma-home/mobile/drawer-logo.png" width="138" height="36" alt="黄果短剧" title="黄果短剧" />
    </a>
    <nav class="home-mobile-menu-links" aria-label="移动端导航">
      <a class="{{if eq .resolvedNavActive "home"}}is-active{{end}}" href="/" data-nav-key="home" data-nav-name="首页"{{if eq .resolvedNavActive "home"}} aria-current="page"{{end}}>首页</a>
      <a class="{{if or (eq .resolvedNavActive "aiShortPlay") (eq .resolvedNavActive "list")}}is-active{{end}}" href="/list/ai-short-play/" data-nav-key="list" data-nav-name="AI成人短剧"{{if or (eq .resolvedNavActive "aiShortPlay") (eq .resolvedNavActive "list")}} aria-current="page"{{end}}>AI成人短剧</a>
      <a class="{{if eq .resolvedNavActive "aiSeries"}}is-active{{end}}" href="/series/" data-nav-key="series" data-nav-name="AI成人剧集"{{if eq .resolvedNavActive "aiSeries"}} aria-current="page"{{end}}>AI成人剧集</a>
      <a class="{{if eq .resolvedNavActive "topic"}}is-active{{end}}" href="/topic/" data-nav-key="theme_index" data-nav-name="专题"{{if eq .resolvedNavActive "topic"}} aria-current="page"{{end}}>专题</a>
      <a class="{{if eq .resolvedNavActive "rank"}}is-active{{end}}" href="/rank/" data-nav-key="rank" data-nav-name="排行榜"{{if eq .resolvedNavActive "rank"}} aria-current="page"{{end}}>排行榜</a>
      <a class="{{if eq .resolvedNavActive "homeRoad"}}is-active{{end}}" href="/home-road/" data-nav-key="home_road" data-nav-name="回家的路"{{if eq .resolvedNavActive "homeRoad"}} aria-current="page"{{end}}>回家的路</a>
      <a class="{{if eq .resolvedNavActive "application"}}is-active{{end}}" href="/application/" data-nav-key="application" data-nav-name="福利应用"{{if eq .resolvedNavActive "application"}} aria-current="page"{{end}}>福利应用</a>
    </nav>
    <div class="home-mobile-menu-contact">
      {{if .appConfig.GmailAddr}}<div>E-mail：<a href="mailto:{{.appConfig.GmailAddr}}">{{.appConfig.GmailAddr}}</a></div>{{end}}
      {{$businessHref := footerContactURL "商务合作" "" .appConfig.GmailAddr .appConfig.TGGroup .appConfig.CustomerServiceHost}}
      <div>{{if $businessHref}}<a href="{{$businessHref}}"{{if hasPrefix $businessHref "http"}} target="_blank" rel="sponsored nofollow noopener noreferrer"{{end}}>商务合作</a>{{else}}<span>商务合作</span>{{end}}</div>
      <div>{{if .appConfig.TGGroup}}<a href="{{.appConfig.TGGroup}}" target="_blank" rel="sponsored nofollow noopener noreferrer">官方群</a>{{else}}<span>官方群</span>{{end}}</div>
    </div>
    <div class="home-mobile-menu-social" aria-label="社交媒体">
      {{if .appConfig.TwitterAddr}}
      <a href="{{.appConfig.TwitterAddr}}" target="_blank" rel="sponsored nofollow noopener noreferrer" aria-label="X"><img src="/static/images/figma-home/mobile/drawer-x.svg" width="24" height="24" alt="" /></a>
      {{else}}
      <span aria-hidden="true"><img src="/static/images/figma-home/mobile/drawer-x.svg" width="24" height="24" alt="" /></span>
      {{end}}
      <span class="home-mobile-menu-social-divider" aria-hidden="true"></span>
      {{if .appConfig.TGGroup}}
      <a href="{{.appConfig.TGGroup}}" target="_blank" rel="sponsored nofollow noopener noreferrer" aria-label="Telegram"><img src="/static/images/figma-home/mobile/drawer-telegram.svg" width="24" height="24" alt="" /></a>
      {{else}}
      <span aria-hidden="true"><img src="/static/images/figma-home/mobile/drawer-telegram.svg" width="24" height="24" alt="" /></span>
      {{end}}
    </div>
  </aside>
</div>

<script defer src="/static/js/common/cookie.js"></script>
<script defer src="/static/js/common/request.js?v=2"></script>
<script defer src="/static/js/common/auth.js?v=2"></script>
<script defer src="/static/common/imgDecypt.js?v=2"></script>
<script defer src="/static/js/pages/header.js?v=8"></script>
<script defer src="/static/js/pages/dialogLoader.js?v=6"></script>
{{template "toast" .}} {{template "eightPop" .}} {{template "dialogAd" .}} {{end}}