<div id="header-nav">
  <nav id="main-nav">
    <% if (!Array.isArray(theme.menu)) { %>
      <% for (let i in theme.menu) { %>
        <span class="main-nav-link-wrap">
          <div class="main-nav-icon icon-taichi"></div>
          <a class="main-nav-link" href="<%- url_for_lang(theme.menu[i]) %>"><%= __(i) %></a>
        </span>
      <% } %>
    <% } else { %>
      <% for (let item of theme.menu) { %>
        <span class="main-nav-link-wrap">
          <div class="main-nav-icon icon <%= (item.icon === 'e62b' && theme.icon_font) || (item.icon === 'f6ad' && !theme.icon_font) || !item.icon ? 'rotate' : '' %>">
            <%- item.icon ? `&#x${item.icon};` : (theme.icon_font ? '&#xe62b;' : '&#xf6ad;') %>
          </div>
          <a class="main-nav-link" href="<%- url_for_lang(item.url) %>"><%= __(item.name) %></a>
        </span>
      <% } %>
    <% } %>
    <a id="main-nav-toggle" class="nav-icon"></a>
  </nav>
  <nav id="sub-nav">
    <% if (theme.rss) { %>
      <a id="nav-rss-link" class="nav-icon" href="<%- url_for(theme.rss) %>" title="<%= __('rss_feed') %>" target="_blank"></a>
    <% } %>
    <% if (theme.algolia_search.enable) { %>
      <a id="nav-search-btn" class="nav-icon popup-trigger" title="<%= __('search') %>"></a>
    <% } %>
    <% if (theme.generator_search.enable) { %>
      <a id="nav-search-btn" class="nav-icon popup-trigger" title="<%= __('search') %>"></a>
    <% } %>
  </nav>
  <% if (theme.i18n.enable) { %>
    <% let i18nMap = {
      'en': 'English',
      'zh-CN': '简体中文',
      'zh-TW': '正體中文',
      'ja': '日本語'
    } %>
    <nav id="i18n-nav">
      <div class="custom-dropdown">
        <div class="select-selected" id="select-selected">
          <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">
          <% for (let i of get_langs()) { %>
            <li data-value="<%= i %>" <% if (post.lang === i) { %>class="selected"<% } %>><%= 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");
        });

        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");
          }
        });
      </script>
    </nav>
  <% } %>
</div>
<header id="header">
  <% if (post.cover && post.cover.startsWith("rgb")) { %>
    <picture></picture>
    <img style="position: absolute;top: 0;left: 0;width: 100%;height: 150%;z-index: -2;display: block;background: <%- post.cover %>;mask: linear-gradient(to top, transparent, #fff 50%);"></img>
  <% } else if (post.cover) { %>
    <picture></picture>
    <img <% if (theme.material_theme.enable) { %>crossorigin="anonymous"<% } %> fetchpriority="high" src="<%- url_for(post.cover, {relative: false}) %>" alt="<%= post.title %>">
  <% } else if (post.cover == 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: 150%;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) { %>
              <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) { %>
            <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) { %>
          <a href="<%- url_for() %>" id="logo">
            <h1 data-aos="<%= theme.animation.options.header.title %>"><%= title %></h1>
          </a>
        <% } %>
      <% } %>
      <% 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) {
              subtitle = null;
            } else if (theme.subtitle || config.subtitle) {
              subtitle = theme.subtitle || config.subtitle;
            } %>
        <h2 id="subtitle-wrap" data-aos="<%= theme.animation.options.header.subTitle %>">
          <% if (subtitle) { %>
            <a href="<%- url_for() %>" id="subtitle"><%= subtitle %></a>
          <% } %>
        </h2>
      <% } %>
    </div>
  </div>
</header>
