digitalfabrik/integreat-cms

{% load i18n %}
{% load content_filters %}
{% load page_filters %}
<div class="table-listing">
    <table {% if can_edit_page %}data-activate-page-order{% endif %}
           class="w-full mt-4 rounded border border-solid border-gray-200 shadow bg-white table-auto cursor-default break-all">
        <tbody>
            {# djlint:off H020 #}
            {% for sibling in siblings %}
                {% if sibling == page %}
                    <tr class="border-2 border-blue-500 hover:bg-gray-100">
                        <td class="single_icon min">
                            <span data-contained-in-siblings="true"
                                  class="drag text-gray-800 block py-3 px-2 cursor-move"
                                  draggable="{% if not page.archived and can_edit_page %}true{% else %}false{% endif %}"
                                  title="{% translate "Change the position of the page with drag & drop." %}">
                                {% if can_edit_page %}
                                    <i icon-name="move"></i>
                                {% endif %}
                            </span>
                        </td>
                        <td id="page_title"
                            data-default-title="{{ sibling.best_translation.title }}">
                            {{ sibling.best_translation.title }}
                        </td>
                    </tr>
                {% else %}
                    {% if page and page == previous_sibling %}
                        <tr data-drop-id="{{ sibling.id }}"
                            data-drop-position="left"
                            class="drop-deactivated drop-between-deactivated h-3 -m-3 hidden">
                            <td colspan="2">
                                <div>
                                    <span></span>
                                </div>
                            </td>
                        </tr>
                    {% else %}
                        <tr data-drop-id="{{ sibling.id }}"
                            data-drop-position="left"
                            class="drop drop-between h-3 -m-3 hidden">
                            <td colspan="2">
                                <div>
                                    <span></span>
                                </div>
                            </td>
                        </tr>
                    {% endif %}
                    <tr class="border border-gray-200 hover:bg-gray-100">
                        <td>
                        </td>
                        <td>
                            {{ sibling.best_translation.title }}
                        </td>
                    </tr>
                    {% if forloop.last %}
                        {% if not page in siblings %}
                            <tr id="last-sibling"
                                data-drop-id="{{ sibling.id }}"
                                data-drop-position="right"
                                class="drop-deactivated drop-between-deactivated h-3 -m-3 hidden">
                                <td colspan="2">
                                    <div>
                                        <span></span>
                                    </div>
                                </td>
                            </tr>
                        {% else %}
                            <tr data-drop-id="{{ sibling.id }}"
                                data-drop-position="right"
                                class="drop drop-between h-3 -m-3 hidden">
                                <td colspan="2">
                                    <div>
                                        <span></span>
                                    </div>
                                </td>
                            </tr>
                        {% endif %}
                    {% endif %}
                {% endif %}
                {% firstof sibling as previous_sibling %}
            {% endfor %}
            {% if not page in siblings %}
                {% if not page %}
                    <tr class="border-2 border-blue-500 hover:bg-gray-100">
                        <td class="single_icon min">
                            <span class="drag text-gray-800 block py-3 px-2 cursor-move"
                                  draggable="{% if can_edit_page %}true{% else %}false{% endif %}">
                                {% if can_edit_page %}
                                    <i icon-name="move"></i>
                                {% endif %}
                            </span>
                        </td>
                        <td id="page_title" data-default-title="{% translate "New Page" %}">
                            {% translate "New Page" %}
                        </td>
                    </tr>
                {% else %}
                    <tr class="border-2 border-blue-500 hover:bg-gray-100">
                        <td class="single_icon min">
                            <span class="drag text-gray-800 block py-3 px-2 cursor-move"
                                  draggable="{% if can_edit_page %}true{% else %}false{% endif %}">
                                {% if can_edit_page %}
                                    <i icon-name="move"></i>
                                {% endif %}
                            </span>
                        </td>
                        <td id="page_title"
                            data-default-title="{{ page.best_translation.title }}">
                            {{ page.best_translation.title }}
                        </td>
                    </tr>
                {% endif %}
            {% endif %}
            {# djlint:on #}
        </tbody>
    </table>
</div>