{% extends "_base.html" %}
{% load i18n %}
{% load static %}
{% load content_filters %}
{% load page_filters %}
{% load rules %}
{% block content %}
    {% has_perm 'cms.change_page_object' request.user as can_edit_pages %}
    {% with filter_form.filters_visible as filters_visible %}
        <div class="table-header">
            <div class="flex flex-wrap justify-between gap-4">
                <h1 class="heading">
                    {% translate "Page Tree" %}
                    <button data-show-tutorial="page-tree" class="hover:text-blue-500">
                        <i icon-name="help-circle" class="align-baseline"></i>
                    </button>
                </h1>
                <a href="{% url 'archived_pages' region_slug=request.region.slug language_slug=language.slug %}"
                   class="font-bold text-sm text-gray-800 flex items-center gap-1 mb-2 hover:underline">
                    <span><i icon-name="archive" class="align-top h-5"></i> {% translate "Archived pages" %}</span>
                </a>
            </div>
            <div class="flex flex-wrap justify-between gap-4">
                <div class="flex flex-wrap gap-4">
                    {% include "generic_language_switcher.html" with target="pages" %}
                    {% include "_search_input.html" with object_type="page" related_form="page-filter-form" search_query=filter_form.cleaned_data.query %}
                </div>
                <div class="flex flex-wrap gap-4">
                    {% if request.user.expert_mode %}
                        <button id="filter-toggle" class="btn btn-ghost">
                            <span class="filter-toggle-text {% if filters_visible %}hidden{% endif %}">{% translate "Show filters" %}</span>
                            <span class="filter-toggle-text {% if not filters_visible %}hidden{% endif %}">{% translate "Hide filters" %}</span>
                        </button>
                    {% endif %}
                    {% if can_edit_pages %}
                        {% if request.region.default_language == language %}
                            <a href="{% url 'new_page' region_slug=request.region.slug language_slug=language.slug %}"
                               class="btn">
                                {% translate "Create page" %}
                            </a>
                        {% else %}
                            {% blocktranslate trimmed asvar disabled_button_title with request.region.default_language.translated_name as default_language %}
                                You can only create pages in the default language ({{ default_language }}).
                            {% endblocktranslate %}
                            <button title="{{ disabled_button_title }}" class="btn" disabled>
                                {% translate "Create page" %}
                            </button>
                        {% endif %}
                    {% endif %}
                </div>
            </div>
        </div>
        <div id="filter-form-container"
             class="{% if not filters_visible %}hidden{% endif %} w-full mt-4 rounded border border-solid border-gray-200 shadow bg-white">
            {% include "pages/_page_filter_form.html" %}
        </div>
    {% endwith %}
    <form method="post" id="bulk-action-form" class="table-listing">
        {% csrf_token %}
        <div class="overflow-x-auto">
            <table {% if not filter_form.is_enabled %} data-delay-event-handlers data-activate-tree-drag-drop data-descendants-url={% url 'get_page_tree_ajax' region_slug=request.region.slug language_slug=language.slug %}{% endif %}
                   class="w-full mt-4 rounded border-2 border-solid border-gray-200 shadow bg-white table-auto">
                <thead>
                    <tr class="border-b border-solid border-gray-200">
                        <th class="text-sm text-left uppercase py-3 pl-4 pr-2 min">
                            <input type="checkbox" id="bulk-select-all" class="cursor-wait" />
                        </th>
                        {% if not filter_form.is_enabled %}
                            <th class="text-sm text-left uppercase py-3 pl-2 pr-2 min">
                                {% translate "Hierarchy" %}
                            </th>
                        {% endif %}
                        <th class="text-sm text-left uppercase py-3 pl-2 pr-2">
                            {% translate "Title in" %} {{ language.translated_name }}
                        </th>
                        {% get_current_language as LANGUAGE_CODE %}
                        {% get_language LANGUAGE_CODE as backend_language %}
                        {% if backend_language and backend_language != language %}
                            <th class="text-sm text-left uppercase py-3 px-2">
                                {% translate "Title in" %} {{ backend_language.translated_name }}
                            </th>
                        {% endif %}
                        <th class="text-sm text-center uppercase py-3 pr-6 min">
                            {% translate "Tags" %}
                        </th>
                        <th class="text-sm text-left uppercase py-3 px-2">
                            <div class="lang-grid flags whitespace-nowrap">
                                {% spaceless %}
                                    {% for lang in languages %}
                                        <a href="{% url 'pages' region_slug=request.region.slug language_slug=lang.slug %}">
                                            <span class="fp fp-rounded fp-{{ lang.primary_country_code }}"
                                                  title="{{ lang.translated_name }}"></span>
                                        </a>
                                    {% endfor %}
                                {% endspaceless %}
                            </div>
                        </th>
                        <th class="text-sm text-left uppercase py-3 pl-2 pr-2">
                            {% translate "Publication status" %}
                        </th>
                        <th class="text-sm text-left uppercase py-3 pl-2">
                            {% translate "Last updated" %}
                        </th>
                        <th class="text-sm text-right uppercase py-3 pl-2 pr-4 min">
                            {% translate "Options" %}
                        </th>
                    </tr>
                </thead>
                <tbody>
                    {% for page in pages %}
                        {% include "pages/page_tree_node.html" %}
                        {% if forloop.last %}
                            <tr data-drop-id="{% if page.is_root %}{{ page.id }}{% else %}{{ page.get_cached_ancestors.0.id }}{% endif %}"
                                data-drop-position="right"
                                class="drop drop-between h-3 hidden"
                                title="test">
                                <td colspan="9">
                                    <div>
                                        {# djlint:off H020 #}
                                        <span></span>
                                        {# djlint:on #}
                                    </div>
                                </td>
                            </tr>
                        {% endif %}
                    {% empty %}
                        <tr>
                            <td>
                            </td>
                            <td colspan="8" class="px-2 py-3">
                                {% if filter_form.is_enabled %}
                                    {% translate "No pages found with these filters." %}
                                {% else %}
                                    {% translate "No pages available yet." %}
                                {% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% if pages %}
            <div class="pt-2 px-2">
                {% if not filter_form.is_enabled %}
                    <a id="expand-all-pages" class="text-blue-500 !cursor-wait">
                        {% spaceless %}
                            <i icon-name="chevron-down"
                               class="align-sub h-5 rounded-full group-hover:bg-blue-500 group-hover:text-white"></i>
                            {% translate "Expand all" %}
                        {% endspaceless %}
                    </a>
                    <span class="text-gray-600 font-default">|</span>
                    <a id="collapse-all-pages" class="text-blue-500 !cursor-wait">
                        {% spaceless %}
                            <i icon-name="chevron-up"
                               class="align-sub h-5 rounded-full group-hover:bg-blue-500 group-hover:text-white"></i>
                            {% translate "Collapse all" %}
                        {% endspaceless %}
                    </a>  <span class="text-gray-600 font-default">|</span>
                {% endif %}
                <div class="inline">
                    <span class="text-gray-800 font-bold" data-list-selection-count>0</span> <span class="text-gray-600">{% translate "Pages selected" %}</span>
                </div>
            </div>
        {% endif %}
        <div class="flex flex-wrap gap-2 mt-2">
            <select id="bulk-action" class="w-auto max-w-full">
                <option>
                    {% translate "Select bulk action" %}
                </option>
                {% if can_edit_pages %}
                    <option data-bulk-action="{% url 'bulk_archive_pages' region_slug=request.region.slug language_slug=language.slug %}">
                        {% translate "Archive pages" %}
                    </option>
                {% endif %}
                {% if MT_PERMITTED %}
                    {% translate "pages" as content_type %}
                    {% if MT_PROVIDER %}
                        <option id="machine-translation-option"
                                data-mt-provider="{{ MT_PROVIDER.name }}"
                                data-url="{% url 'word_count' region_slug=request.region.slug language_slug=language.slug model_type='page' %}"
                                data-bulk-action="{% url 'machine_translation_pages' region_slug=request.region.slug language_slug=language.slug %}">
                            {% blocktranslate trimmed with provider=MT_PROVIDER.name %}
                                Machine translate {{ content_type }} via {{ provider }} to {{ language }}
                            {% endblocktranslate %}
                        </option>
                    {% else %}
                        <option disabled
                                title="{% translate "This language is not supported by any available machine translation provider." %}">
                            {% blocktranslate trimmed %}
                                Machine translate {{ content_type }} to {{ language }}
                            {% endblocktranslate %}
                        </option>
                    {% endif %}
                {% endif %}
                {% if language.can_be_pdf_exported %}
                    <option id="pdf-export-option"
                            data-bulk-action="{% url 'export_pdf' region_slug=request.region.slug language_slug=language.slug %}"
                            data-target="_blank"
                            data-language-slug="{{ language.slug }}">
                        {% translate "Export published pages as PDF" %}
                    </option>
                {% else %}
                    <option disabled
                            title="{% translate "Currently PDF-Export is not available in this language." %}">
                        {% translate "Export published pages as PDF" %}
                    </option>
                {% endif %}
                {% if request.user.expert_mode %}
                    {% with language_translated_name=language.translated_name %}
                        {% blocktranslate trimmed asvar xliff_export_public %}
                            Export published pages for {{ language_translated_name }} translation
                        {% endblocktranslate %}
                        {% blocktranslate trimmed asvar xliff_export_all %}
                            Export unpublished (⚠️) and published pages for {{ language_translated_name }} translation
                        {% endblocktranslate %}
                        {% if language == request.region.default_language %}
                            {% blocktranslate trimmed asvar xliff_export_disabled %}
                                You cannot export XLIFF files for the default language
                            {% endblocktranslate %}
                            <option disabled title="{{ xliff_export_disabled }}">
                                {{ xliff_export_public }} ({{ XLIFF_EXPORT_VERSION|upper }})
                            </option>
                            <option disabled title="{{ xliff_export_disabled }}">
                                {{ xliff_export_all }} ({{ XLIFF_EXPORT_VERSION|upper }})
                            </option>
                        {% else %}
                            <option data-bulk-action="{% url 'download_xliff_only_public' region_slug=request.region.slug language_slug=language.slug %}">
                                {{ xliff_export_public }} ({{ XLIFF_EXPORT_VERSION|upper }})
                            </option>
                            <option data-bulk-action="{% url 'download_xliff' region_slug=request.region.slug language_slug=language.slug %}">
                                {{ xliff_export_all }} ({{ XLIFF_EXPORT_VERSION|upper }})
                            </option>
                        {% endif %}
                    {% endwith %}
                {% endif %}
                {% if request.user.is_superuser or request.user.is_staff %}
                    <option id="xliff-multiple-languages-option"
                            data-show-xliff-export-overlay
                            data-bulk-action="{% url 'download_xliff_multiple_languages' region_slug=request.region.slug language_slug=language.slug %}">
                        {% translate "Export selected pages for multilingual translation" %} ({{ XLIFF_EXPORT_VERSION|upper }})
                    </option>
                    {% translate "pages" as content_type %}
                    <option data-bulk-action="{% url 'publish_multiple_pages' region_slug=request.region.slug language_slug=language.slug %}">
                        {% blocktranslate trimmed %}
                            Publish {{ content_type }}
                        {% endblocktranslate %}
                    </option>
                    <option data-bulk-action="{% url 'draft_multiple_pages' region_slug=request.region.slug language_slug=language.slug %}">
                        {% blocktranslate trimmed %}
                            Draft {{ content_type }}
                        {% endblocktranslate %}
                    </option>
                {% endif %}
            </select>
            <button id="bulk-action-execute" class="btn" disabled>
                {% translate "Execute" %}
            </button>
        </div>
    </form>
    {% if request.user.expert_mode and can_edit_pages %}
        <div class="flex-wrap relative w-auto mt-12">
            <h3 class="font-bold text-xl">
                {% translate "Import XLIFF files" %}
            </h3>
            <div class="my-2 text-s text-gray-600">
                {% translate "Supported file extensions" %}: .zip, .xlf, .xliff
            </div>
            <form class="flex flex-wrap h-full mt-2 gap-2"
                  method="post"
                  enctype="multipart/form-data"
                  action="{% url 'upload_xliff' region_slug=request.region.slug language_slug=language.slug %}">
                <label id="xliff_file_label"
                       for="xliff_file"
                       class="inline-block cursor-pointer bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 m-0 rounded">
                    <i icon-name="upload" class="inline-block pr-1"></i>
                    {% translate "Select files" %}
                </label>
                <span id="xliff_file_label_multiple" class="hidden">{% translate "and {} other files" %}</span>
                <input id="xliff_file"
                       type="file"
                       name="xliff_file"
                       class="hidden"
                       accept=".zip, .xlf, .xliff"
                       multiple />
                {% csrf_token %}
                <button id="xliff_file_submit" class="btn" disabled>
                    {% translate "Import" %}
                </button>
            </form>
        </div>
    {% endif %}
    {% include "../generic_confirmation_dialog.html" %}
    {% include "../tutorials/page_tree.html" with tutorial_id="page-tree" hidden=request.user.page_tree_tutorial_seen %}
    {% include "pages/_page_preview_overlay.html" %}
    {% include "pages/_page_xliff_export_overlay.html" %}
    {% include "_machine_translation_overlay.html" %}
{% endblock content %}
