digitalfabrik/integreat-cms

<!--generic template for language tabs in forms -->
<!--please set variable "target" when including this code-->
{% load i18n %}
{% load content_filters %}
{% with translation_states|sort_translation_states:language as sorted_translation_states %}
    <ul id="tab-wrapper" class="flex flex-wrap items-end px-4">
        {% for other_language, other_status in sorted_translation_states %}
            <li class="mr-2 -mb-[2px] {% if other_language == language %}z-10{% endif %}">
                <div class="font-bold bg-white">
                    <div class="border-b-2 border-white">
                        {% if other_language == language %}
                            <div class="py-[calc(0.75rem+2px)] px-4 border-l border-t border-r border-blue-500 rounded-t text-blue-500 cursor-default">
                            {% else %}
                                <a class="block py-[calc(0.75rem+2px)] px-4 bg-water-500 border-l border-t border-r border-blue-500 rounded-t text-black hover:bg-white hover:text-blue-500"
                                   href="{% build_url target=target region_slug=request.region.slug language_slug=other_language.slug content_field=content_field content_id=instance.id %}">
                                {% endif %}
                                {% if other_status == translation_status.MACHINE_TRANSLATED %}
                                    <span class="translation-status"
                                          title="{% translate "Machine translated" %}">
                                        <i icon-name="bot"></i>
                                    </span>
                                {% elif other_status == translation_status.IN_TRANSLATION %}
                                    <span {% if other_language == language %}id="currently-in-translation-state"{% endif %}
                                          title="{% translate "Currently in translation" %}">
                                        <i icon-name="clock"></i>
                                    </span>
                                    {# For the current language, provide fallback icons in case translation process is cancelled #}
                                    {% if other_language == language %}
                                        <span id="reset-translation-state-{{ translation_status.OUTDATED }}"
                                              title="{% translate "Translation outdated" %}"
                                              class="hidden">
                                            <i icon-name="alert-triangle"></i>
                                        </span>
                                        <span id="reset-translation-state-{{ translation_status.UP_TO_DATE }}"
                                              title="{% translate "Translation up-to-date" %}"
                                              class="hidden">
                                            <i icon-name="check"></i>
                                        </span>
                                    {% endif %}
                                {% elif other_status == translation_status.OUTDATED %}
                                    <span class="translation-status"
                                          title="{% translate "Translation outdated" %}">
                                        <i icon-name="alert-triangle"></i>
                                    </span>
                                {% elif other_status == translation_status.UP_TO_DATE %}
                                    <span class="translation-status"
                                          title="{% translate "Translation up-to-date" %}">
                                        <i icon-name="check"></i>
                                    </span>
                                {% elif other_status == translation_status.FALLBACK %}
                                    <span class="translation-status"
                                          title="{% translate "Default language is duplicated" %}">
                                        <i icon-name="copy"></i>
                                    </span>
                                {% elif other_status == translation_status.MISSING %}
                                    <span title="{% translate "Translation missing" %}"
                                          class="no-trans translation-status">
                                        <i icon-name="x"></i>
                                    </span>
                                {% endif %}
                                <span class="flex-grow language-name">{{ other_language.translated_name }}</span>
                                <span class="flex-end w-8 fp fp-rounded fp-{{ other_language.primary_country_code }}"></span>
                                {% if other_language.secondary_country_code %}
                                    <span class="fp ml-1 w-8 fp-rounded fp-{{ other_language.secondary_country_code }}"></span>
                                {% endif %}
                                {% if other_language != language %}
                                </a>
                            {% else %}
                            </div>
                        {% endif %}
                    </div>
                </div>
            </li>
        {% endfor %}
        {% if instance and sorted_translation_states|length > 4 %}
            <li class="z-10 ml-auto">
                <div id="language-switcher" class="relative flex flex-col text-black">
                    <div id="language-switcher-current"
                         class="flex font-bold text-right bg-water-500 py-[calc(0.75rem+2px)] px-4 border-l border-t border-r border-blue-500 rounded-t cursor-default">
                        <i id="language-switcher-globe" icon-name="globe" class="hidden"></i>
                        <span id="language-switcher-text">{% translate "Other Languages" %}</span>
                        <i icon-name="chevron-down"></i>
                    </div>
                    <ul id="language-switcher-list"
                        class="absolute bottom-0 right-0 z-10 hidden h-0">
                    </ul>
                </div>
            </li>
        {% endif %}
    </ul>
{% endwith %}