<details id="lang-selector" class="language-selector relative">
  <summary class="btn btn-ghost btn-sm btn-icon ds-text hover:ds-text-secondary flex items-center justify-center text-sm cursor-pointer list-none"
           aria-label="Language">
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"></path>
    </svg>
  </summary>
  <div class="absolute right-0 mt-1 w-48 ds-bg border border-gray-500 rounded-md shadow-lg z-10"
       role="menu" aria-label="Language selection">
    <div class="py-1">
      {% for lang in languages %}
      <button type="button"
              class="block w-full text-left px-3 py-2 hover:ds-bg-secondary{% if lang.is_active %} font-semibold{% endif %}"
              hx-post="{{ lang.endpoint }}"
              hx-target="#lang-selector"
              hx-swap="outerHTML"
              {% if lang.is_active %}aria-current="true" disabled{% endif %}
              data-lang="{{ lang.code }}">{{ lang.label }}</button>
      {% endfor %}
    </div>
  </div>
</details>
