{%- assign current_page_url = page.url | relative_url -%}
<nav class="absolute top-0 left-0 right-0 flex w-full flex-wrap items-center justify-between py-4">
  <div class="flex w-full flex-wrap items-center justify-between px-5">
    <a class="flex" href="/" aria-label="Andres Chacon - Developer">
      <img src="{{site.logo}}" alt="webpage logo" class="block h-8 w-auto">
      <p class="pl-4 hidden md:block text-lg font-bold">{{site.title}} <span
          class="text-mulish text-sm font-normal">~{{page.url}}</span>
      </p>
    </a>

    <div class="flex divide-x">
      {% for page in site.pages %}
      {% if page.nav %}
      <div><a class="px-4 hover:text-sky-400 {% if page.url == current_page_url %}font-bold{% endif %}"
          href="{{ page.url }}">{{ page.title | default: page.name }}</a></div>
      {% endif%}
      {% endfor %}

      {% if site.languages.size > 1 %}
      <div class="language-switcher relative">
        <button class="current-language px-4 hover:text-sky-400">
          {{ site.active_lang | upcase }}
        </button>

        <div class="dropdown-content absolute hidden mt-2 py-2 bg-white rounded shadow-lg z-20">
          {% for tongue in site.languages %}
          {% if tongue != site.active_lang %}
          <a class="p-4 hover:text-sky-400" {% static_href
            %}href="{% if tongue == site.default_lang %}{{site.baseurl}}{{page.url}}{% else %}{{site.baseurl}}/{{ tongue }}{{page.url}}{% endif %}"
            {% endstatic_href %}>{{ tongue | upcase }}</a>{%- if forloop.last == false -%}{{" "}}{{ site.langsep }}{%-
          endif -%}
          {% endif %}
          {% endfor %}
        </div>
      </div>
      {% endif %}
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const currentLangButton = document.querySelector('.current-language');
      const dropdownContent = document.querySelector('.dropdown-content');

      if (currentLangButton && dropdownContent) {
        currentLangButton.addEventListener('click', function () {
          dropdownContent.classList.toggle('hidden');
        });

        document.addEventListener('click', function (event) {
          if (!currentLangButton.contains(event.target) && !dropdownContent.contains(event.target)) {
            dropdownContent.classList.add('hidden');
          }
        });
      }
    });
  </script>
</nav>