digitalfabrik/integreat-cms

<!--generic template for language switcher-->
<!--please set variable "target" when including this code-->
{% load content_filters %}
<div id="language-switcher" class="flex flex-col z-10 text-lg">
    <a id="language-switcher-current"
       href="{% url target region_slug=request.region.slug language_slug=language.slug %}"
       class="font-bold flex justify-between bg-white py-2 px-4 rounded shadow hover:bg-gray-200 border-2 border-white hover:border-gray-200">
        {{ language.translated_name }}
        <span>
            <span class="fp fp-rounded fp-{{ language.primary_country_code }} ml-2"></span>
            {% if language.secondary_country_code %}
                <span class="fp fp-rounded fp-{{ language.secondary_country_code }}"></span>
            {% endif %}
            <i id="language-switcher-chevron"
               class="-mr-2 h-5"
               icon-name="chevron-down"></i>
        </span>
    </a>
    <div id="language-switcher-list" class="h-0 hidden">
        {% for other_language in languages|remove:language %}
            <a href="{% url target region_slug=request.region.slug language_slug=other_language.slug %}"
               class="flex justify-between whitespace-nowrap {% if forloop.last %}rounded-b{% endif %} shadow px-4 py-3 text-gray-800 hover:bg-gray-200 bg-white">
                {{ other_language.translated_name }}
                <span>
                    <span class="fp fp-rounded fp-{{ other_language.primary_country_code }} ml-2"></span>
                    {% if other_language.secondary_country_code %}
                        <span class="fp fp-rounded fp-{{ other_language.secondary_country_code }}"></span>
                    {% endif %}
                </span>
            </a>
        {% endfor %}
    </div>
</div>