{% load i18n %}
{% load content_filters %}
{% load page_filters %}
{% load tree_filters %}

{% 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><span></span></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 %}
        <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="true"
                  title="{% trans 'Change the order and position of the pages with drag & drop.' %}">
                <i data-feather="move"></i>
            </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="{% trans 'Expand all subpages' %}"
                      data-collapse-title="{% trans 'Collapse all subpages' %}"
                      data-page-id="{{ page.id }}"
                      data-page-children="{{ page|get_children_ids }}"
                      data-page-descendants-url="{% url 'get_page_tree_ajax' region_slug=request.region.slug language_slug=language.slug tree_id=page.tree_id %}">
                    <i data-feather="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>{% trans '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=LANGUAGE_CODE %}" 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>{% trans '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.IN_TRANSLATION %}
                                    <span title="{% trans 'Currently in translation' %}">
                                        <i data-feather="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="{% trans 'Translation outdated' %}">
                                        <i data-feather="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="{% trans 'Translation up-to-date' %}">
                                        <i data-feather="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="{% trans 'Translation missing' %}" class="no-trans">
                                        <i data-feather="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="{% trans 'Currently in translation' %}">
                                    <i data-feather="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:"d.m.Y, H:i" }}
        </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="{% trans 'View page as preview' %}"
                class="btn-icon">
                <i data-feather="eye"></i>
            </button>
        {% else %}
            <button
                type="button"
                title="{% trans 'You cannot preview an empty page.' %}"
                class="btn-icon"
                disabled>
                <i data-feather="eye"></i>
            </button>
        {% endif %}
        {% if page_translation.status == PUBLIC %}
            <a href="{{ WEBAPP_URL }}{{ page_translation.get_absolute_url }}"
                rel="noopener noreferrer" target="_blank" title="{% trans 'Open page in web app' %}" class="btn-icon">
                <i data-feather="external-link"></i>
            </a>
        {% else %}
            <button title="{% trans 'This page cannot be opened in the web app, because it is not public.' %}" class="btn-icon" disabled>
                <i data-feather="external-link"></i>
            </button>
        {% endif %}
        <a href="{% url 'edit_page' page_id=page.id region_slug=request.region.slug language_slug=language.slug %}" title="{% trans 'Edit page' %}" class="btn-icon">
            <i data-feather="edit"></i>
        </a>

        <button title="{% trans '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 data-feather="archive"></i>
        </button>
        {% if perms.cms.delete_page %}
            {% if not page.is_leaf %}
                <button title="{% trans 'You cannot delete a page which has subpages.' %}&#013;{% trans 'This also involves archived subpages.' %}" class="btn-icon" disabled>
                    <i data-feather="trash-2"></i>
                </button>
            {% elif page.mirroring_pages.exists %}
                <button title="{% trans 'This page cannot be deleted because it was embedded as live content from another page.' %}&#013;{% trans 'You can however archive this page.' %}" class="btn-icon" disabled>
                    <i data-feather="trash-2"></i>
                </button>
            {% else %}
                <button title="{% trans '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 data-feather="trash-2"></i>
                </button>
            {% endif %}
        {% endif %}
        {% if request.region.short_urls_enabled and request.user.expert_mode %}
            {% if page_translation %}
            <button data-copy-to-clipboard="{{ page_translation.short_url }}" title="{% trans 'Copy short link' %}" class="btn-icon">
                <i data-feather="copy"></i>
            </button>
            {% else %}
            <button title="{% trans 'You cannot copy a short link of a page which has no translation.' %}" class="btn-icon" disabled>
                <i data-feather="copy"></i>
            </button>
            {% endif %}
        {% endif %}
    </td>
</tr>
