{% load i18n %}
{% load content_filters %}
{% load page_filters %}
{% load tree_filters %}
{% load rules %}
{% get_translation page language.slug as page_translation %}
<tr id="page-{{ page.id }}-drop-left"
    data-drop-id="{{ page.id }}"
    data-drop-position="left"
    class="drop {% if not parent_id %}drop-between{% endif %} h-3 -m-3 hidden level-{{ page.relative_depth }}">
    <td colspan="9">
        <div>
            {# djlint:off H020 #}
            <span></span>
            {# djlint:on #}
        </div>
    </td>
</tr>
<tr id="page-{{ page.id }}"
    data-drop-id="{{ page.id }}"
    data-drop-position="last-child"
    class="page-row drop drop-on border-t border-b border-solid border-gray-200 hover:bg-gray-100 level-{{ page.relative_depth }} {% if parent_id %}hidden parent-page-{{ parent_id }}{% endif %}">
    <td class="pl-4">
        <input type="checkbox"
               name="selected_ids[]"
               value="{{ page.id }}"
               class="bulk-select-item cursor-wait" />
    </td>
    {% if not filter_form.is_enabled %}
        {% has_perm 'cms.change_page_object' request.user as can_edit_pages %}
        <td class="hierarchy single_icon whitespace-nowrap">
            <span data-drag-id="{{ page.id }}"
                  data-node-descendants="{{ page|get_descendant_ids }}"
                  class="drag cursor-move text-gray-800 inline-block pl-4 align-middle"
                  draggable="{% if can_edit_pages %}true{% else %}false{% endif %}"
                  title="{% translate "Change the order and position of the pages with drag & drop." %}">
                {% if can_edit_pages %}
                    <i icon-name="move"></i>
                {% endif %}
            </span>
            {% if not page.parent_id and not page.is_leaf or page.parent_id and page.cached_children|length > 0 %}
                <span class="toggle-subpages inline-block align-middle cursor-wait transform"
                      data-expand-title="{% translate "Expand all subpages" %}"
                      data-collapse-title="{% translate "Collapse all subpages" %}"
                      data-page-id="{{ page.id }}"
                      data-page-children="{{ page|get_children_ids }}"
                      data-page-tree-id="{{ page.tree_id }}">
                    <i icon-name="chevron-right"></i>
                </span>
            {% endif %}
        </td>
    {% endif %}
    <td>
        <a href="{% url 'edit_page' page_id=page.id region_slug=request.region.slug language_slug=language.slug %}"
           class="block py-1.5 px-2 overflow-hidden max-w-xs whitespace-nowrap text-ellipsis text-gray-800"
           title="{% if page_translation %} {{ page_translation.title }}{% endif %}">
            {% if page_translation %}
                {{ page_translation.title }}
            {% else %}
                <i>{% translate "Translation not available" %}</i>
            {% endif %}
        </a>
    </td>
    {% if backend_language and backend_language != language %}
        <td>
            <a href="{% url 'edit_page' page_id=page.id region_slug=request.region.slug language_slug=backend_language.slug %}"
               class="block py-1.5 px-2 overflow-hidden max-w-xs whitespace-nowrap text-ellipsis text-gray-800"
               title="{% if page.backend_translation %} {{ page.backend_translation.title }}{% endif %}">
                <div class="translation-title">
                    {% if page.backend_translation %}
                        {{ page.backend_translation.title }}
                    {% else %}
                        <i>{% translate "Translation not available" %}</i>
                    {% endif %}
                </div>
            </a>
        </td>
    {% endif %}
    <td class="whitespace-nowrap">
        <div class="block py-1.5 px-2 text-gray-800">
            {% for tag in page_translation.tags %}
                <span class="bg-orange-400 text-white rounded px-2 py-1">{{ tag }}</span>
            {% endfor %}
        </div>
    </td>
    <td class="whitespace-nowrap">
        <div class="block py-1.5 px-2 text-gray-800">
            <div class="lang-grid">
                {% spaceless %}
                    {% for other_language, other_status in page.translation_states.values %}
                        <a href="{% url 'edit_page' page_id=page.id region_slug=request.region.slug language_slug=other_language.slug %}"
                           class="{{ other_language.slug }}">
                            <div id="translation-icon">
                                {% if other_status == translation_status.MACHINE_TRANSLATED %}
                                    <span title="{% translate "Machine translated" %}">
                                        <i icon-name="bot"
                                           class="{% if other_language.slug == language.slug %}text-violet-500{% else %}text-gray-800{% endif %}"></i>
                                    </span>
                                {% elif other_status == translation_status.IN_TRANSLATION %}
                                    <span title="{% translate "Currently in translation" %}">
                                        <i icon-name="clock"
                                           class="{% if other_language.slug == language.slug %}text-blue-500{% else %}text-gray-800{% endif %}"></i>
                                    </span>
                                {% elif other_status == translation_status.OUTDATED %}
                                    <span title="{% translate "Translation outdated" %}">
                                        <i icon-name="alert-triangle"
                                           class="{% if other_language.slug == language.slug %}text-yellow-500{% else %}text-gray-800{% endif %}"></i>
                                    </span>
                                {% elif other_status == translation_status.UP_TO_DATE %}
                                    <span title="{% translate "Translation up-to-date" %}">
                                        <i icon-name="check"
                                           class="{% if other_language.slug == language.slug %}text-green-500{% else %}text-gray-800{% endif %}"></i>
                                    </span>
                                {% elif other_status == translation_status.MISSING %}
                                    <span title="{% translate "Translation missing" %}" class="no-trans">
                                        <i icon-name="x"
                                           class="{% if other_language.slug == language.slug %}text-red-500{% else %}text-gray-800{% endif %}"></i>
                                    </span>
                                {% endif %}
                            </div>
                            <div id="ajax-icon" class="hidden">
                                <span title="{% translate "Currently in translation" %}">
                                    <i icon-name="clock"
                                       class="{% if other_language.slug == language.slug %}text-blue-500{% else %}text-gray-800{% endif %}"></i>
                                </span>
                            </div>
                        </a>
                    {% endfor %}
                {% endspaceless %}
            </div>
        </div>
    </td>
    <td>
        <div class="block py-1.5 px-2 text-gray-800">
            {{ page_translation.get_status_display }}
        </div>
    </td>
    <td>
        <div class="block py-1.5 px-2 whitespace-nowrap text-gray-800">
            {{ page_translation.last_updated|date:"SHORT_DATE_FORMAT" }}
        </div>
    </td>
    <td class="pl-2 pr-4 py-1.5 text-right flex flex-nowrap gap-2">
        {% if page_translation.content or page.mirrored_page %}
            <button type="button"
                    data-preview-page="{% url 'preview_page_ajax' page_id=page.id region_slug=request.region.slug language_slug=language.slug %}"
                    title="{% translate "View page as preview" %}"
                    class="btn-icon">
                <i icon-name="eye"></i>
            </button>
        {% else %}
            <button type="button"
                    title="{% translate "You cannot preview an empty page." %}"
                    class="btn-icon"
                    disabled>
                <i icon-name="eye"></i>
            </button>
        {% endif %}
        {% if page_translation.status == PUBLIC %}
            <a href="{{ WEBAPP_URL }}{{ page_translation.get_absolute_url }}"
               rel="noopener noreferrer"
               target="_blank"
               title="{% translate "Open page in web app" %}"
               class="btn-icon">
                <i icon-name="external-link"></i>
            </a>
        {% else %}
            <button title="{% translate "This page cannot be opened in the web app, because it is not public." %}"
                    class="btn-icon"
                    disabled>
                <i icon-name="external-link"></i>
            </button>
        {% endif %}
        <a href="{% url 'edit_page' page_id=page.id region_slug=request.region.slug language_slug=language.slug %}"
           title="{% translate "Edit page" %}"
           class="btn-icon">
            <i icon-name="pen-square"></i>
        </a>
        {% if can_edit_pages %}
            {% if page.mirroring_pages.exists %}
                <button title="{% translate "This page cannot be archived because it was embedded as live content from another page." %}"
                        class="btn-icon"
                        disabled>
                    <i icon-name="archive"></i>
                </button>
            {% else %}
                <button title="{% translate "Archive page" %}"
                        class="confirmation-button btn-icon"
                        data-confirmation-title="{{ archive_dialog_title }}"
                        data-confirmation-text="{{ archive_dialog_text }}"
                        data-confirmation-subject="{{ page.best_translation.title }}"
                        data-action="{% url 'archive_page' page_id=page.id region_slug=request.region.slug language_slug=language.slug %}">
                    <i icon-name="archive"></i>
                </button>
            {% endif %}
        {% endif %}
        {% if perms.cms.delete_page %}
            {# djlint:off H023 #}
            {% if not page.is_leaf %}
                <button title="{% translate "You cannot delete a page which has subpages." %}&#013;{% translate "This also involves archived subpages." %}"
                        class="btn-icon"
                        disabled>
                    <i icon-name="trash-2"></i>
                </button>
            {% elif page.mirroring_pages.exists %}
                <button title="{% translate "This page cannot be deleted because it was embedded as live content from another page." %}"
                        class="btn-icon"
                        disabled>
                    <i icon-name="trash-2"></i>
                </button>
            {% else %}
                <button title="{% translate "Delete page" %}"
                        class="confirmation-button btn-icon"
                        data-confirmation-title="{{ delete_dialog_title }}"
                        data-confirmation-text="{{ delete_dialog_text }}"
                        data-confirmation-subject="{{ page.best_translation.title }}"
                        data-action="{% url 'delete_page' page_id=page.id region_slug=request.region.slug language_slug=language.slug %}">
                    <i icon-name="trash-2"></i>
                </button>
            {% endif %}
            {# djlint:on #}
        {% endif %}
        {% if request.region.short_urls_enabled and request.user.expert_mode %}
            {% if page_translation %}
                <a href="#"
                   data-copy-to-clipboard="{{ page_translation.short_url }}"
                   title="{% translate "Copy short link" %}"
                   class="btn-icon">
                    <i icon-name="copy"></i>
                    <i icon-name="check" class="hidden text-green-500"></i>
                </a>
            {% else %}
                <button title="{% translate "You cannot copy a short link of a page which has no translation." %}"
                        class="btn-icon"
                        disabled>
                    <i icon-name="copy"></i>
                </button>
            {% endif %}
        {% endif %}
    </td>
</tr>
