<div id="header-nav">
  <nav id="main-nav" aria-label="Primary navigation">
    <%_ if (!Array.isArray(theme.menu)) { _%>
      <%_ for (let i in theme.menu) { _%>
        <a class="main-nav-link-wrap" href="<%- url_for_lang(theme.menu[i]) %>">
          <div class="main-nav-icon icon-taichi"></div>
          <span class="main-nav-link"><%= __(i) %></span>
        </a>
      <%_ } _%>
    <%_ } else { _%>
      <%_ for (let item of theme.menu) { _%>
        <a class="main-nav-link-wrap" href="<%- url_for_lang(item.url) %>">
          <%_ if (item.icon !== false) { _%>
            <div class="main-nav-icon icon <%= (item.icon === 'e62b' && theme.icon_font) || (item.icon === 'f6ad' && !theme.icon_font) || !item.icon ? 'rotate' : '' %>">
              <%_ if (item.icon) { _%>
                <%_ if (item.icon.includes('/') && item.icon.includes('.')) { _%>
                  <img src="<%- url_for(item.icon, {relative: false}) %>" alt="<%= item.name %> icon" style="height: 1em;">
                <%_ } else { _%>
                  <%- `&#x${item.icon};` %>
                <%_ } _%>
              <%_ } else { _%>
                <%- theme.icon_font ? '&#xe62b;' : '&#xf6ad;' %>
              <%_ } _%>
            </div>
          <%_ } _%>
          <span class="main-nav-link"><%= __(item.name) %></span>
        </a>
      <%_ } _%>
    <%_ } _%>
    <a id="main-nav-toggle" class="nav-icon" aria-label="Toggle navigation" role="button"></a>
  </nav>
  <nav id="sub-nav" aria-label="Secondary navigation">
    <%_ if (theme.rss) { _%>
      <a id="nav-rss-link" class="nav-icon" href="<%- url_for(theme.rss) %>" title="<%= __('rss_feed') %>" aria-label="<%= __('rss_feed') %>" target="_blank"></a>
    <%_ } _%>
    <%_ if (theme.algolia_search.enable || theme.generator_search.enable) { _%>
      <a id="nav-search-btn" class="nav-icon popup-trigger" title="<%= __('search') %>" aria-label="<%= __('search') %>"></a>
    <%_ } _%>
  </nav>
  <%_ if (theme.i18n.enable) { _%>
    <%_ let i18nMap = {
      'en': 'English',
      'zh-CN': '简体中文',
      'zh-TW': '正體中文',
      'ja': '日本語',
      'pt-BR': 'Português Brasileiro'
    } _%>
    <nav id="i18n-nav" aria-label="Language selection">
      <div class="custom-dropdown">
        <div class="select-selected" id="select-selected" role="button" aria-haspopup="listbox" aria-expanded="false" aria-label="Language menu">
          <span id="nav-language-btn" class="nav-icon" style="padding: 0 20px 0 0"></span>
          <span id="selected-lang"><%= i18nMap[post.lang] %></span>
        </div>
        <ul class="select-items" id="select-items" role="listbox" aria-label="Languages">
          <%_ for (let i of get_langs()) { _%>
            <li data-value="<%= i %>" role="option" <% if (post.lang === i) { %>class="selected" aria-selected="true"<% } else { %>aria-selected="false"<% } %>><%= i18nMap[i] %></li>
          <%_ } _%>
        </ul>
      </div>
      <script>
        var selectSelected = document.getElementById("select-selected");
        var selectedLang = document.getElementById("selected-lang");
        var selectItems = document.getElementById("select-items");
        var selectOptions = selectItems.querySelectorAll("li");

        selectSelected.addEventListener("click", () => {
          selectItems.classList.toggle("show");
          var expanded = selectSelected.getAttribute("aria-expanded") === "true";
          selectSelected.setAttribute("aria-expanded", (!expanded).toString());
        });

        selectOptions.forEach((item) => {
          item.addEventListener("click", () => {
            const langMap = {};
            <%_ for (let i of get_langs()) { _%>
              langMap['<%= i %>'] = '<%= switch_lang(i) %>';
            <%_ } _%>
            selectedLang.textContent = item.textContent;
            selectItems.classList.remove("show");
            selectOptions.forEach((option) => {
              option.classList.remove("selected");
            });
            item.classList.add("selected");
            window.location = langMap[item.dataset.value];
          });
        });

        document.addEventListener("click", (event) => {
          if (!event.target.closest(".custom-dropdown")) {
            selectItems.classList.remove("show");
            selectSelected.setAttribute("aria-expanded", "false");
          }
        });
      </script>
    </nav>
  <%_ } _%>
  <%_ if (theme.triangle_badge.enable) { _%>
  <a href="<%= theme.triangle_badge.link %>" class="triangle-badge" title="<%= theme.triangle_badge.icon %>" target="_blank" rel="noopener nofollow noreferrer">
    <div class="icon icon-<%= theme.triangle_badge.icon %> triangle-badge-icon"></div>
  </a>
  <%_ } _%>
</div>
<header id="header" aria-label="Site header">
  <%_ let headerImage = post.banner ?? post.cover; _%>
  <%_ if (headerImage && headerImage.startsWith("rgb")) { _%>
    <picture></picture>
    <img style="position: absolute;top: 0;left: 0;width: 100%;height: 180%;z-index: -2;display: block;background: <%- headerImage %>;mask: linear-gradient(to top, transparent, #fff 50%);"></img>
  <%_ } else if (headerImage) { _%>
    <picture></picture>
    <img <% if (theme.material_theme.enable) { %>crossorigin="anonymous"<% } %> fetchpriority="high" src="<%- url_for(headerImage, {relative: false}) %>" alt="<%= post.title %>">
  <%_ } else if (headerImage == false) { _%>
    <picture></picture>
    <img style="visibility:hidden"></img>
  <%_ } else { _%>
    <%_ if (is_post()) { _%>
      <%_ if (theme.cover && theme.cover.startsWith("rgb")) { _%>
        <picture></picture>
        <img style="position: absolute;top: 0;left: 0;width: 100%;height: 180%;z-index: -2;display: block;background: <%- theme.cover %>;mask: linear-gradient(to top, transparent, #fff 50%);"></img>
      <%_ } else if (theme.cover) { _%>
        <picture></picture>
        <img <% if (theme.material_theme.enable) { %>crossorigin="anonymous"<% } %> fetchpriority="high" src="<%- url_for(theme.cover, {relative: false}) %>" alt="<%= post.title %>">
      <%_ } else if (theme.cover === false) { _%>
        <picture></picture>
        <img style="visibility:hidden"></img>
      <%_ } else { _%>
        <picture>
          <%_ if (theme.banner_srcset.enable) { _%>
            <%_ for (let i of theme.banner_srcset.srcset) { _%>
              <%_ if (Array.isArray(i.src)) { _%>
                <%_ for (let srcItem of i.src) { _%>
                  <source media="<%= i.media %>" srcset="<%- url_for(srcItem, {relative: false}) %>">
                <%_ } _%>
              <%_ } else { _%>
                <source media="<%= i.media %>" srcset="<%- url_for(i.src, {relative: false}) %>">
              <%_ } _%>
            <%_ } _%>
            <img <% if (theme.material_theme.enable) { %>crossorigin="anonymous"<% } %> fetchpriority="high" src="<%- url_for(theme.banner, {relative: false}) %>" alt="<%= post.title %>">
          <%_ } _%>
        </picture>
        <%_ if (theme.banner_srcset.enable) { _%>
          <img alt="<%= post.title %>" style="visibility: hidden;">
        <%_ } else { _%>
          <img <% if (theme.material_theme.enable) { %>crossorigin="anonymous"<% } %> fetchpriority="high" src="<%- url_for(theme.banner, {relative: false}) %>" alt="<%= post.title %>">
        <%_ } _%>
      <%_ } _%>
    <%_ } else { _%>
      <picture>
        <%_ if (theme.banner_srcset.enable) { _%>
          <%_ for (let i of theme.banner_srcset.srcset) { _%>
            <%_ if (Array.isArray(i.src)) { _%>
              <%_ for (let srcItem of i.src) { _%>
                <source media="<%= i.media %>" srcset="<%- url_for(srcItem, {relative: false}) %>">
              <%_ } _%>
            <%_ } else { _%>
              <source media="<%= i.media %>" srcset="<%- url_for(i.src, {relative: false}) %>">
            <%_ } _%>
          <%_ } _%>
          <img <% if (theme.material_theme.enable) { %>crossorigin="anonymous"<% } %> fetchpriority="high" src="<%- url_for(theme.banner, {relative: false}) %>" alt="<%= post.title %>">
        <%_ } _%>
      </picture>
      <%_ if (theme.banner_srcset.enable) { _%>
        <img alt="<%= post.title %>" style="visibility: hidden;">
      <%_ } else { _%>
        <img <% if (theme.material_theme.enable) { %>crossorigin="anonymous"<% } %> fetchpriority="high" src="<%- url_for(theme.banner, {relative: false}) %>" alt="<%= post.title %>">
      <%_ } _%>
    <%_ } _%>
  <%_ } _%>
  <div id="header-outer">
    <div id="header-title">
      <%_ if (post.type == '404') { _%>
        <a href="/" id="logo">
          <h1 data-aos="<%= theme.animation.options.header.title %>"><%= __("not_found.title") %></h1>
        </a>
      <%_ } else { _%>
        <%_ let title;
            if (is_archive()) {
              title = __('archives');
            } else if (is_category()) {
              title = __('categories');
            } else if (is_tag()) {
              title = __('tags');
            } else if (post.title) {
              title = post.title;
            } else {
              title = config.title;
            } _%>
        <%_ if (title) { _%>
          <span id="logo">
            <h1 data-aos="<%= theme.animation.options.header.title %>"><%= title %></h1>
          </span>
        <%_ } _%>
      <%_ } _%>
      <%_ if (post.type == 404) { _%>
        <h2 id="subtitle-wrap" data-aos="<%= theme.animation.options.header.subTitle %>">
          <a href="/" id="subtitle"><%= __("not_found.subtitle") %></a>
        </h2>
      <%_ } else { _%>
        <%_ let subtitle;
            if (is_archive()) {
              if (is_month()) {
                subtitle = page.year + '/' + page.month;
              } else if (is_year()) {
                subtitle = page.year;
              } else {
                subtitle = null;
              }
            } else if (is_category()) {
              subtitle = post.category;
            } else if (is_tag()) {
              subtitle = post.tag;
            } else if (post.title) {
              if (theme.summary.enable && theme.summary.style === 'subtitle' && post.excerpt) {
                subtitle = stripHtml(post.excerpt);
              } else {
                subtitle = null;
              }
            } else if (theme.subtitle && typeof theme.subtitle === 'string') {
              subtitle = theme.subtitle;
            } else if (config.subtitle) {
              subtitle = config.subtitle;
            } _%>
        <h2 id="subtitle-wrap" data-aos="<%= theme.animation.options.header.subTitle %>">
          <%_ if (subtitle) { _%>
            <%_ if (is_home() && theme.subtitle?.typing?.enable) { _%>
              <span id="subtitle"><span></span></span>
            <%_ } else { _%>
              <span id="subtitle"><%= subtitle %></span>
            <%_ } _%>
          <%_ } _%>
        </h2>
      <%_ } _%>
    </div>
  </div>
</header>
