{{- $page := .context -}}
{{- $changeLanguage := (T "changeLanguage") | default "Change language" -}}

{{- if hugo.IsMultilingual -}}
  <div class="hx:relative">
    <button
      title="{{ $changeLanguage }}"
      data-state="closed"
      class="navbar-language-switcher hx:cursor-pointer hx:p-2 hx:text-current hx:hover:bg-gray-100 hx:dark:hover:bg-neutral-800 hx:transition-colors hx:duration-200 hx:rounded-lg hx:flex hx:items-center hx:gap-1"
      type="button"
      aria-label="{{ $changeLanguage }}"
    >
      {{- partial "utils/icon.html" (dict "name" "translate" "attributes" "height=20") -}}
      {{- partial "utils/icon.html" (dict "name" "chevron-down" "attributes" "height=14 class=\"hx:transition-transform hx:duration-200 hx:ease-in-out\"") -}}
    </button>
    <ul
      class="navbar-language-options hx:hidden hx:absolute hx:top-full hx:right-0 hx:z-20 hx:mt-1 hx:max-h-80 hx:overflow-auto hx:rounded-md hx:ring-1 hx:ring-black/5 hx:bg-white hx:py-1 hx:text-sm hx:shadow-lg hx:dark:ring-white/20 hx:dark:bg-neutral-800"
      style="min-width: 140px; scrollbar-width: none; -ms-overflow-style: none;"
    >
      {{ range site.Languages }}
        {{ $link := partial "utils/lang-link" (dict "lang" .Lang "context" $page) }}
        <li class="hx:flex hx:flex-col">
          <a
            href="{{ $link }}"
            class="hx:text-gray-800 hx:dark:text-gray-100 hx:hover:bg-primary-50 hx:hover:text-primary-600 hx:hover:dark:bg-primary-500/10 hx:hover:dark:text-primary-600 hx:relative hx:cursor-pointer hx:whitespace-nowrap hx:py-1.5 hx:transition-colors hx:ltr:pl-3 hx:ltr:pr-9 hx:rtl:pr-3 hx:rtl:pl-9"
          >
            {{- .LanguageName -}}
            {{- if eq .LanguageName site.Language.LanguageName -}}
              <span class="hx:absolute hx:inset-y-0 hx:flex hx:items-center hx:ltr:right-3 hx:rtl:left-3">
                {{- partial "utils/icon.html" (dict "name" "check" "attributes" "height=1em width=1em") -}}
              </span>
            {{- end -}}
          </a>
        </li>
      {{ end -}}
    </ul>
  </div>

  <style>
  .navbar-language-options::-webkit-scrollbar {
    display: none;
  }
  </style>

  <script>
  (function() {
    const switcher = document.querySelector('.navbar-language-switcher');
    const options = document.querySelector('.navbar-language-options');
    
    if (switcher && options) {
      const chevron = switcher.querySelector('svg:last-child');
      
      switcher.addEventListener('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        
        const isOpen = switcher.dataset.state === 'open';
        switcher.dataset.state = isOpen ? 'closed' : 'open';
        
        if (isOpen) {
          options.classList.add('hx:hidden');
          if (chevron) chevron.style.transform = 'rotate(0deg)';
        } else {
          options.classList.remove('hx:hidden');
          if (chevron) chevron.style.transform = 'rotate(180deg)';
        }
      });
      
      // Close when clicking outside
      document.addEventListener('click', function(e) {
        if (!switcher.contains(e.target) && !options.contains(e.target)) {
          switcher.dataset.state = 'closed';
          options.classList.add('hx:hidden');
          if (chevron) chevron.style.transform = 'rotate(0deg)';
        }
      });
    }
  })();
  </script>
{{- end -}}