{% load i18n insight_tags %}
{% get_current_language as LANGUAGE_CODE %}
{% get_available_languages as LANGUAGES %}

<!-- Language switch -->
<form action="{% url 'set_language' %}" method="post" class="h-full">
  {% csrf_token %}
  <input name="next" type="hidden" value="{{ redirect_to }}" />
  <div class="relative h-full">
    <!-- Language Button -->
    <button type="button" data-insight-dropdown="language-menu" class="btn btn-subtle-secondary btn-s h-full">
      {% icon name="language" %}
      {% for lang_code, lang_name in LANGUAGES %}
        {% if lang_code == LANGUAGE_CODE %}
          <span class="lg:hidden xl:inline-block">{{ lang_name }}</span>
        {% endif %}
      {% endfor %}
    </button>
    <!-- Language list -->
    <div class="hidden absolute z-50 bg-insight-surface border border-insight-surface rounded-insight-overlay shadow-insight-overlay overflow-hidden" id="language-menu">
      <ul class="list-none font-semibold">
        {% for lang_code, lang_name in LANGUAGES %}
          <li>
            <button name="language" type="submit" value="{{ lang_code }}" class="px-6 py-2 w-full hover:bg-insight-base">
              {{ lang_name }}
            </button>
          </li>
        {% endfor %}
      </ul>
    </div>
  </div>
</form>