{% load i18n %}
<div id="xliff_export_overlay"
     class="hidden fixed items-center justify-center inset-0 bg-opacity-75 bg-gray-800 z-50 cursor-pointer">
    <div class="cursor-auto justify-center w-[400px] max-h-fit px-[10px] z-50 m-auto">
        <div class="bg-white opacity-100 content rounded shadow-md w-full">
            <div class="flex items-center w-full rounded p-4 bg-water-500">
                <h2 class="font-bold font-default">
                    {% translate "Multilingual XLIFF export" %}
                </h2>
                <button type="button"
                        id="btn-close-xliff-export"
                        class="flex ml-auto rounded-full hover:bg-blue-500 hover:text-white">
                    <i icon-name="x-circle" class="h-8 w-8"></i>
                </button>
            </div>
            <div class="w-full p-4 rounded shadow overflow-scroll max-h-[80vh]">
                <h3>
                    {% translate "Please select languages for multilingual export." %}
                </h3>
                <table class="mt-4">
                    <tbody>
                        {% for lang in languages %}
                            <tr class="h-[38px]">
                                {% if lang == request.region.default_language %}
                                    <td>
                                    </td>
                                    <td class="text-gray-400"
                                        title="{% translate "You cannot export XLIFF files for the default language" %}">
                                        {{ lang.translated_name }}
                                    </td>
                                    <td>
                                        <span class="left-2 fp fp-rounded fp-{{ lang.primary_country_code }}"
                                              title="{{ lang.translated_name }}"></span>
                                    </td>
                                {% else %}
                                    <td>
                                        <input id="xliff_export_select_lang_{{ lang.slug }}"
                                               type="checkbox"
                                               form="bulk-action-form"
                                               name="selected_language_slugs[]"
                                               value="{{ lang.slug }}"
                                               class="bulk-select-language" />
                                    </td>
                                    <td>
                                        <label for="xliff_export_select_lang_{{ lang.slug }}">
                                            {{ lang.translated_name }}
                                        </label>
                                    </td>
                                    <td>
                                        <label for="xliff_export_select_lang_{{ lang.slug }}">
                                            <span class="left-2 fp fp-rounded fp-{{ lang.primary_country_code }}"
                                                  title="{{ lang.translated_name }}"></span>
                                        </label>
                                    </td>
                                {% endif %}
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
                <div class="font-bold mt-4">
                    <input id="select-all-languages" type="checkbox" />
                    <label for="select-all-languages">
                        {% translate "Select all languages." %}
                    </label>
                </div>
                <div class="flex justify-end">
                    <button id="xliff-overlay-bulk-action-execute"
                            class="btn"
                            form="bulk-action-form"
                            type="submit"
                            disabled>
                        {% translate "Execute" %}
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
