{% load i18n phoxtail_core_tags phoxtail_design_tags %}
{% comment %}
The language switcher in the top bar: its button opens a menu below it,
the current language marked. Opened and closed by core's
js/language_menu.js (loaded by scripts.html).
{% endcomment %}
{% languages as languages %}
{% if languages %}
    <div class="dash-lang" data-language-menu>
        <button type="button"
                class="dash-dock__item dash-dock__more-btn phx-language-menu__button"
                aria-label="{% translate 'Language' %}"
                aria-expanded="false"
                aria-haspopup="true">
            {% get_current_language as current_language %}
            <span class="dash-dock__icon">{% icon "language" %}</span>
            <span class="dash-dock__label dash-lang__code">{{ current_language }}</span>
        </button>
        <div class="dash-lang__menu phx-popover">
            {% for language in languages %}
                {# Posted, not followed: set_language stores the choice, then redirects to `next`. #}
                <form method="post" action="{% url 'set_language' %}">
                    {% csrf_token %}
                    <input type="hidden" name="language" value="{{ language.code }}">
                    <input type="hidden" name="next" value="{{ language.url }}">
                    <button type="submit"
                            class="dash-lang__option{% if language.active %} dash-lang__option--active{% endif %}">
                        <span class="dash-lang__name">{{ language.name_local }}</span>
                        <span class="dash-lang__option-code">{{ language.code }}</span>
                    </button>
                </form>
            {% endfor %}
        </div>
    </div>
{% endif %}