{% extends "_base.html" %}
{% load i18n %}
{% load static %}
{% load content_filters %}
{% load page_filters %}
{% load rules %}
{% block content %}
    {% with filter_form.filters_visible as filters_visible %}
        <div class="table-header">
            <div class="flex flex-wrap justify-between gap-4">
                <h1 class="heading">
                    {% trans 'Page Tree' %}
                    <button data-show-tutorial="page-tree" class="hover:text-blue-500">
                        <i data-feather="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 data-feather="archive" class="align-top h-5"></i> {% trans '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-light-blue">
                            <span class="filter-toggle-text {% if filters_visible %}hidden{% endif %}">{% trans 'Show filters' %}</span>
                            <span class="filter-toggle-text {% if not filters_visible %}hidden{% endif %}">{% trans 'Hide filters' %}</span>
                        </button>
                    {% endif %}
                    {% has_perm 'cms.change_page_object' request.user as can_edit_pages %}
                    {% 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">
                                {% trans 'Create page' %}
                            </a>
                        {% else %}
                            {% blocktrans 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 }}).
                    {% endblocktrans %}
                            <button title="{{ disabled_button_title }}" class="btn" disabled>{% trans '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{% 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">{% trans 'Hierarchy' %}</th>
                        {% endif %}
                        <th class="text-sm text-left uppercase py-3 pl-2 pr-2">{% trans '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">{% trans 'Title in' %} {{ backend_language.translated_name }}</th>
                        {% endif %}
                        <th class="text-sm text-center uppercase py-3 pr-6 min">{% trans '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">{% trans 'Status' %}</th>
                        <th class="text-sm text-left uppercase py-3 pl-2">{% trans 'Last updated' %}</th>
                        <th class="text-sm text-right uppercase py-3 pl-2 pr-4 min">{% trans '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>
                                        <span></span>
                                    </div>
                                </td>
                            </tr>
                        {% endif %}
                    {% empty %}
                        <tr>
                            <td></td>
                            <td colspan="8" class="px-2 py-3">
                                {% if filter_form.is_enabled %}
                                    {% trans 'No pages found with these filters.' %}
                                {% else %}
                                    {% trans '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 data-feather="chevron-down"
                               class="align-sub h-5 rounded-full group-hover:bg-blue-500 group-hover:text-white"></i>
                            {% trans '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 data-feather="chevron-up"
                               class="align-sub h-5 rounded-full group-hover:bg-blue-500 group-hover:text-white"></i>
                            {% trans '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">{% trans "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>
                        {% trans 'Select bulk action' %}
                    </option>
                    <option data-bulk-action="{% url 'bulk_archive_pages' region_slug=request.region.slug language_slug=language.slug %}">
                        {% trans 'Archive pages' %}
                    </option>
                    {% if SUMM_AI_ENABLED %}
                        <option  data-bulk-action="{% url 'auto_translate_easy_german_pages' region_slug=request.region.slug language_slug=language.slug %}">
                            {% trans 'Automatically translate this page into Easy German' %}
                        </option>
                    {% endif %}
                    <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 }}">
                        {% trans 'Export published pages as PDF' %}
                    </option>
                    {% if request.user.expert_mode %}
                        {% with language_translated_name=language.translated_name %}
                            {% blocktrans asvar xliff_export_public %}Export published pages for {{ language_translated_name }} translation{% endblocktrans %}
                            {% blocktrans asvar xliff_export_all %}Export unpublished (⚠️) and published pages for {{ language_translated_name }} translation{% endblocktrans %}
                            {% if language == request.region.default_language %}
                                {% blocktrans asvar xliff_export_disabled %}You cannot export XLIFF files for the default language{% endblocktrans %}
                                <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 %}">
                            {% trans 'Export selected pages for multilingual translation' %} ({{ XLIFF_EXPORT_VERSION|upper }})
                        </option>
                    {% endif %}
                </select>
                <button id="bulk-action-execute" class="btn" disabled>{% trans 'Execute' %}</button>
            </div>
        </form>
        {% if request.user.expert_mode %}
            <div class="flex-wrap relative w-auto mt-12">
                <h3 class="font-bold text-xl">{% trans 'Import XLIFF files' %}</h3>
                <div class="my-2 text-s text-gray-600">{% trans "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 data-feather="upload" class="inline-block pr-1"></i>
                        {% trans 'Select files' %}
                    </label>
                    <span id="xliff_file_label_multiple" class="hidden">{% trans '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>{% trans '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" %}
    {% endblock content %}
