{{define "header"}}
<link rel="stylesheet" href="/static/css/header.css?v=14" />
<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="/">
      <img class="brand-logo" src="/static/images/logo.png?v=3" 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}}"
        {{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"
        {{if .IsActive}}aria-current="page"{{end}}
        >{{.Name}}</a
      >
      {{else}}
      <a
        class="{{if .IsActive}}nav-link-active{{else}}nav-link{{end}}"
        href="{{.Href}}"
        {{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="前往搜索页">
      <img src="/static/images/figma-home/mobile/search.svg" width="16" height="16" alt="" />
    </a>

    <span hidden data-app-download-url="{{.appConfig.AppAddr}}"></span>
  </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="黄果短剧首页">
      <img src="/static/images/figma-home/mobile/drawer-logo.png?v=3" 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="/"{{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/"{{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/"{{if eq .resolvedNavActive "aiSeries"}} aria-current="page"{{end}}>AI成人剧集</a>
      <a class="{{if eq .resolvedNavActive "topic"}}is-active{{end}}" href="/topic/"{{if eq .resolvedNavActive "topic"}} aria-current="page"{{end}}>专题</a>
      <a class="{{if eq .resolvedNavActive "rank"}}is-active{{end}}" href="/rank/"{{if eq .resolvedNavActive "rank"}} aria-current="page"{{end}}>排行榜</a>
      <a class="{{if eq .resolvedNavActive "homeRoad"}}is-active{{end}}" href="/home-road/"{{if eq .resolvedNavActive "homeRoad"}} aria-current="page"{{end}}>回家的路</a>
      <a class="{{if eq .resolvedNavActive "application"}}is-active{{end}}" href="/application/"{{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/request.js?v=3"></script>
<script defer src="/static/common/imgDecypt.js?v=2"></script>
<script defer src="/static/js/pages/header.js?v=9"></script>
<script defer src="/static/js/pages/dialogLoader.js?v=7"></script>
{{template "toast" .}} {{template "eightPop" .}} {{template "dialogAd" .}} {{end}}