{{ $currentLang := $.Site.Language.Lang }}
<header>
  <div class="header-container">
    <div class="logo-menu-bars-container">
      <a href="{{ "/" | relLangURL }}" class="logo">
        <img src="{{ "images/FreeBSD-monochromatic.svg" | relURL }}" width="160" height="50" alt="FreeBSD logo">
      </a>
      <label class="menu-bars" for="menu-bars">
        <span class="menu-bars-icon" aria-hidden="true"></span>
      </label>
    </div>
    <input id="menu-bars" type="checkbox">
    <nav>
      <ul class="menu">
        <li class="menu-item">
          <input id="about" type="checkbox">
          <a href="#" aria-label="Navigate to About section">
            <label class="menu-item-description" for="about">
              {{ i18n "h-about" }}
              <i class="fa fa-angle-down fa-lg" aria-hidden="true"></i>
            </label>
          </a>
          <ul class="sub-menu">
            <li class="title">
              <a href="{{ "about" | relLangURL }}">{{ i18n "h-about" }}</a>
            </li>
            <li>
              <a href="{{ "projects/newbies" | relLangURL }}">{{ i18n "h-introduction" }}</a>
            </li>
            <li>
              <a href="{{ "features" | relLangURL }}">{{ i18n "h-features" }}</a>
            </li>
            <li>
              <a href="{{ "privacy" | relLangURL }}">{{ i18n "h-privacy-policy" }}</a>
            </li>
            <li>
              <a href="{{ "projects" | relLangURL }}">{{ i18n "h-projects" }}</a>
            </li>
            <li>
              <a href="https://ports.freebsd.org/cgi/ports.cgi" title={{ i18n "ports" }}>{{ i18n "h-ports" }}</a>
            </li>
          </ul>
        </li>
        <li class="menu-item">
          <input id="download" type="checkbox">
          <a href="#" aria-label="Navigate to get FreeBSD section">
            <label class="menu-item-description" for="download">
              {{ i18n "h-get-freebsd" }}
              <i class="fa fa-angle-down fa-lg" aria-hidden="true"></i>
            </label>
          </a>
          <ul class="sub-menu">
            <li class="title">
              <a href="{{ "where" | relLangURL }}">{{ i18n "h-get-freebsd" }}</a>
            </li>
            <li>
              <a href="{{ "releases" | relLangURL }}">{{ i18n "h-release-information" }}</a>
            </li>
            <li>
              <a href="{{ "releng" | relLangURL }}">{{ i18n "h-release-engineering" }}</a>
            </li>
          </ul>
        </li>
        <li class="menu-item">
          <input id="documentation" type="checkbox">
          <a href="#" aria-label="Navigate to get Documentation section">
            <label class="menu-item-description" for="documentation">
              {{ i18n "h-documentation" }}
              <i class="fa fa-angle-down fa-lg" aria-hidden="true"></i>
            </label>
          </a>
          <ul class="sub-menu">
            <li class="title">
              <a href="{{ printf "%s%s%s" "https://docs.FreeBSD.org/" $currentLang "/" }}">{{ i18n "h-documentation" }}</a>
            </li>
            <li>
              <a href="{{ printf "%s%s%s" "https://docs.FreeBSD.org/" $currentLang "/books/handbook/" }}">{{ i18n "h-freebsd-handbook" }}</a>
            </li>
            <li>
              <a href="{{ printf "%s%s%s" "https://docs.FreeBSD.org/" $currentLang "/books/porters-handbook/" }}">{{ i18n "h-porter-handbook" }}</a>
            </li>
            <li>
              <a href="{{ printf "%s%s%s" "https://docs.FreeBSD.org/" $currentLang "/books/fdp-primer" }}">{{ i18n "h-documentation-handbook" }}</a>
            </li>
            <li>
              <a href="https://man.FreeBSD.org">{{ i18n "h-manual-pages" }}</a>
            </li>
            <li>
              <a href="https://papers.FreeBSD.org">{{ i18n "h-presentation-and-papers" }}</a>
            </li>
            <li>
              <a href="{{ printf "%s%s%s" "https://docs.FreeBSD.org/" $currentLang "/books" }}">{{ i18n "h-books" }}</a>
            </li>
            <li>
              <a href="{{ printf "%s%s%s" "https://docs.FreeBSD.org/" $currentLang "/articles" }}">{{ i18n "h-articles" }}</a>
            </li>
          </ul>
        </li>
        <li class="menu-item">
          <input id="community" type="checkbox">
          <a href="#" aria-label="Navigate to get Community section">
            <label class="menu-item-description" for="community">
              {{ i18n "h-community" }}
              <i class="fa fa-angle-down fa-lg" aria-hidden="true"></i>
            </label>
          </a>
          <ul class="sub-menu">
            <li class="title">
              <a href="{{ "community" | relLangURL }}">{{ i18n "h-community" }}</a>
            </li>
            <li>
              <a href="{{ "community/mailinglists" | relLangURL }}">{{ i18n "h-mailing-lists" }}</a>
            </li>
            <li>
              <a href="https://forums.FreeBSD.org">{{ i18n "h-forums" }}</a>
            </li>
            <li>
              <a href="{{ "usergroups" | relLangURL }}">{{ i18n "h-user-groups" }}</a>
            </li>
            <li>
              <a href="{{ "events" | relLangURL }}">{{ i18n "h-events" }}</a>
            </li>
            <li>
              <a href="https://freebsdfoundation.org/our-work/journal/">{{ i18n "h-freebsd-journal" }}</a>
            </li>
          </ul>
        </li>
        <li class="menu-item">
          <input id="developers" type="checkbox">
          <a href="#" aria-label="Navigate to get Developers section">
            <label class="menu-item-description" for="developers">
              {{ i18n "h-developers" }}
              <i class="fa fa-angle-down fa-lg" aria-hidden="true"></i>
            </label>
          </a>
          <ul class="sub-menu">
            <li class="title">
              <a href="{{ "projects" | relLangURL }}">{{ i18n "h-developers" }}</a>
            </li>
            <li>
              <a href="https://wiki.FreeBSD.org/IdeasPage">{{ i18n "h-project-ideas" }}</a>
            </li>
            <li>
              <a href="https://cgit.FreeBSD.org">{{ i18n "h-git-repository" }}</a>
            </li>
            <li>
              <a href="https://github.com/freebsd">{{ i18n "h-git-mirror" }}</a>
            </li>
            <li>
              <a href="https://reviews.FreeBSD.org">{{ i18n "h-phabricator" }}</a>
            </li>
            <li>
              <a href="https://wiki.FreeBSD.org">{{ i18n "h-wiki" }}</a>
            </li>
            <li>
              <a href="https://ci.FreeBSD.org">{{ i18n "h-CI" }}</a>
            </li>
          </ul>
        </li>
        <li class="menu-item">
          <input id="support" type="checkbox">
          <a href="#" aria-label="Navigate to get Support section">
            <label class="menu-item-description" for="support">
              {{ i18n "h-support" }}
              <i class="fa fa-angle-down fa-lg" aria-hidden="true"></i>
            </label>
          </a>
          <ul class="sub-menu">
            <li class="title">
              <a href="{{ "support" | relLangURL }}">{{ i18n "h-support" }}</a>
            </li>
            <li>
              <a href="{{ "commercial" | relLangURL }}">{{ i18n "h-vendors" }}</a>
            </li>
            <li>
              <a href="{{ "security" | relLangURL }}">{{ i18n "h-security-information" }}</a>
            </li>
            <li>
              <a href="https://bugs.FreeBSD.org/search/">{{ i18n "h-bug-reports" }}</a>
            </li>
            <li>
              <a href="{{ "support" | relLangURL }}">{{ i18n "h-submitting-bug-reports" }}</a>
            </li>
            <li>
              <a href="{{ "support/webresources" | relLangURL }}">{{ i18n "h-webresources" }}</a>
            </li>
          </ul>
        </li>
      </ul>
    </nav>
    <div class="search-donate-container">
      {{ $currentLanguage := $.Site.Language }}
      <form
        class="search"
        method="get"
        id="search-header-form"
        action="https://duckduckgo.com"
        name="search-header-form"
        onsubmit="document.getElementById('words').value+=' site:FreeBSD.org'">
        <input type="hidden" name="DB" value="{{ $currentLanguage }}">
        <input type="hidden" name="ka" value="v">
        <input type="hidden" name="kt" value="v">
        <input type="hidden" name="kh" value="1">
        <input type="hidden" name="kj" value="r2">
        <input
          id="words"
          name="q"
          type="text"
          size="20"
          maxlength="25"
          onfocus="if( this.value==this.defaultValue ) this.value='';"
          value="{{ i18n "search" }}"
          placeholder="{{ i18n "search" }}">
        <button>
          <i class="fa fa-search" aria-hidden="true"></i>
        </button>
      </form>
      <details class="i18n">
        <summary class="lang-toggle">
          <img src="{{ "images/language.png" | relURL }}" class="language-image" alt="{{ i18n "choose-language" }}" />
        </summary>
        <ul class="lang-dropdown">
          <li>
            <a href="{{ .Site.Home.RelPermalink }}" class="current-lang" aria-current="page">{{ .Language.Label }}</a>
          </li>
          {{ range .Translations }}
            <li>
              <a href="{{ .RelPermalink }}" lang="{{ .Language.Lang }}">{{ .Language.Label }}</a>
            </li>
          {{ end }}
        </ul>
      </details>
      <div class="donate">
        <a href="https://freebsdfoundation.org/donate/">
          <span class="heart">❤️</span>
          {{ i18n "h-donate" }}
        </a>
      </div>
    </div>
  </div>
</header>