{% capture logo_path %}{{ site.logo }}{% endcapture %}

<div class="masthead">
  <div class="masthead__inner-wrap">
    <div class="masthead__menu">
      <nav id="site-nav" class="greedy-nav">
        {% unless logo_path == empty %}
          <a class="site-logo" href="{{ '/' | relative_url }}"><img src="{{ logo_path | relative_url }}" alt="{{ site.masthead_title | default: site.title }}"></a>
        {% endunless %}
        <a class="site-title" href="{{ '/' | relative_url }}" style="white-space: nowrap;">
          {{ site.masthead_title | default: site.title }}
          {% if site.subtitle %}<span class="site-subtitle">{{ site.subtitle }}</span>{% endif %}
        </a>
        <ul class="visible-links" id="navigation" style="overflow: visible;">
        </ul>

        {% if site.search == true %}
        <button class="search__toggle" type="button">
          <span class="visually-hidden">{{ site.data.ui-text[site.locale].search_label | default: "Toggle search" }}</span>
          <svg xmlns="http://www.w3.org/2000/svg" style="width:26px;height:26px;vertical-align:middle;fill:currentColor" viewBox="0 0 512 512"><path d="M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z"/></svg>
        </button>
        {% endif %}
        <button class="greedy-nav__toggle hidden" type="button">
          <span class="visually-hidden">{{ site.data.ui-text[site.locale].menu_label | default: "Toggle menu" }}</span>
          <div class="navicon"></div>
        </button>
         <select name="language" id="language">
          </select>
        <ul class="hidden-links hidden"></ul>
      </nav>
    </div>
  </div>
</div>

<script src="/utils/mastheadHelper.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', (event) => {
    const languageStored = localStorage.getItem('language') || 'en';
    /* load the dropdown menu and get the element for later use */
    const languageDropdown = loadDropDownMenu(languageStored);

    const currentUrl = window.location.href;
    /* get navigation file depending on localstorage, default navigation file in English */
    let navigationFile = getNavigationFile(languageStored);

    /* generate the navigation menu */
    generateNavigationMenu(navigationFile);

  /* match the page with the selected language, if the page is a tutorial or read page, do nothing */
  if(!currentUrl.includes('/watch/') && !currentUrl.includes('/read/')) {
    languageDropdown.value = languageStored;
    matchPageWithSelection(languageStored, currentUrl);
  }

  languageDropdown.addEventListener('change', (event) => {
    const language = event.target.value;
    localStorage.setItem('language', language);
    matchPageWithSelection(language,currentUrl);
  });
});
</script>