{% extends base_template %}
{% load debusine %}
{% block navbar_left %}
    {{ block.super }}
    {% include "web/_collection-menu.html" with collection=collection only %}
{% endblock %}
{% block content %}
    <div class="container">
        <div class="row">
            <div class="col-6">
                {% if relations_available %}
                    <form id="form" method="post">
                        {% csrf_token %}
                        {{ form.as_p }}
                        <p id="position-help">The new relation will be appended after the current ones. They can be re-ordered later on.</p>
                        <div class="btn-group"
                             role="group"
                             aria-label="Collection relation actions">
                            <input class="btn btn-primary" type="submit" value="Save">
                            <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>
                    {{ allowed_targets_by_type|json_script:"allowed-targets-by-type" }}
                    <script>
                const allowedTargetsByType = JSON.parse(
                    document.getElementById("allowed-targets-by-type").textContent
                );
                const typeSelect = document.getElementById("id_type");
                const targetSelect = document.getElementById("id_target");

                function updateForm() {
                    filterTargets();
                    updatePositionVisibility();
                }

                function filterTargets() {
                    const selectedType = typeSelect.value;
                    const allowedTargetIds = allowedTargetsByType[selectedType] || [];

                    for (const option of targetSelect.options) {
                        if (option.value === "") {
                            continue;
                        }
                        const relationId = Number(option.value);

                        const isAllowed = allowedTargetIds.includes(relationId);

                        option.hidden = !isAllowed;
                        option.disabled = !isAllowed;
                    }

                    {#Clear the current selected target if not valid anymore#}
                    if (!allowedTargetIds.includes(Number(targetSelect.value))) {
                        targetSelect.value = "";
                    }
                }

                function updatePositionVisibility() {
                    const positionHelpP = document.getElementById("position-help");

                    positionHelpP.hidden = (typeSelect.value !== "suite-requires");
                }

                typeSelect.addEventListener("change", updateForm);
                updateForm();
                    </script>
                {% else %}
                    <p id="cannot-create-relations">Cannot create relations for the current collection.</p>
                {% endif %}
            </div>
        </div>
    </div>
{% endblock %}