{% extends base_template %}
{% load debusine %}
{% load static %}
{% block navbar_left %}
    {{ block.super }}
    {% include "web/_collection-menu.html" with collection=collection only %}
{% endblock %}
{% block content %}
    <script src="{% static "vendor/sortable/Sortable.min.js" %}"></script>
    Listing only <code>Requires</code> relations.
    <div class="row">
        <div class="col-6">
            <form method="post">
                {% csrf_token %}
                <input type="hidden" name="order" id="id_order">
                <table class="table table-sm table-hover table-striped table-tds-vertical-align-middle"
                       id="relations">
                    <thead>
                        <tr>
                            <th></th>
                            <th>Target</th>
                            <th>Position</th>
                            <th>Details</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody id="relations-body">
                        {% for collection_relation in collection_relations %}
                            <tr data-id="{{ collection_relation.id }}">
                                <td class="handle" style="cursor: grab;">
                                    <span class="bi bi-list"></span>
                                </td>
                                <td>
                                    <a href="{{ collection_relation.target.get_absolute_url }}">{{ collection_relation.target }}</a>
                                </td>
                                <td class="position-cell">{{ collection_relation.position }}</td>
                                <td>{% include "web/_collection_relation-details.html" with collection_relation=collection_relation only %}</td>
                                <td>
                                    {% ui collection_relation as collection_relation_ui %}
                                    {% for shortcut in collection_relation_ui.ui_shortcuts %}
                                        {% widget shortcut %}
                                    {% endfor %}
                                </td>
                            </tr>
                        {% empty %}
                            <tr>
                                <td colspan="5" id="no-relations">
                                    No relations of type <code>Requires</code>.
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
                <div class="btn-group mt-4"
                     role="group"
                     aria-label="Confirm/cancel buttons">
                    {% if save_button %}<button type="submit" class="btn btn-primary">Save order</button>{% endif %}
                    <a class="btn btn-secondary"
                       href="{% url "workspaces:collections:collection_relations:list" wname=collection.workspace.name ccat=collection.category cname=collection.name %}">Cancel</a>
                </div>
            </form>
        </div>
    </div>
    <script>
    function updatePositionsAndOrder() {
        const orderInput = document.getElementById("id_order");
        const rows = document.querySelectorAll("#relations-body tr[data-id]");

        const newOrder = [];

        rows.forEach((row, index) => {
            const positionCell = row.querySelector(".position-cell");
            positionCell.textContent = index + 1;
            newOrder.push(row.dataset.id);
        });
        orderInput.value = newOrder.join(",");
    }
    new Sortable(document.getElementById("relations-body"), {
        handle: '.handle',
        animation: 150,
        onEnd: updatePositionsAndOrder,
    });
    updatePositionsAndOrder();
    </script>
{% endblock %}