{% extends 'django_spire/page/full_page.html' %}

{% load static %}

{% block base_body_additional_top_js %}
    <script type="application/javascript" src="{% static 'django_spire/knowledge/collection/js/managers.js' %}?v={{ DJANGO_SPIRE_VERSION }}"></script>
{% endblock %}

{% block base_body_additional_bottom_js %}
    <script type="application/javascript" src="{% static 'django_spire/knowledge/collection/js/x_component.js' %}?v={{ DJANGO_SPIRE_VERSION }}"></script>
{% endblock %}

{% block full_page_content %}
    <div class="row justify-content-between align-items-center mb-2 pb-2 border-bottom">
        <div class="col">
            <div class="card-title text-uppercase mb-0">
                Collections
            </div>
        </div>
        <div class="col-auto d-flex">
            {% url 'django_spire:knowledge:collection:form:create' as create_url %}
            {% include 'django_spire/button/primary_button.html' with button_text='Add' button_href=create_url button_icon="bi bi-plus" %}
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div
                x-data="{
                    manager: new CollectionManager({{ collection_tree_json }}),

                    async move_collection({collection, order, new_parent}) {
                        let response = null
                        try {
                            response = await django_glue_fetch(
                                '{% url "django_spire:knowledge:collection:json:reorder" %}',
                                {payload: {collection_id: collection.id, order: order, parent: new_parent}}
                            )
                        } catch (e) {
                             $dispatch('notify', {'type': 'error', 'message': 'An unexpected error has occured. Please refresh the page and try again.'})
                        }

                        if (response.type === 'error') {
                            $dispatch('notify', {'type': response.type, 'message': response.message})
                        }
                    }
                }"
                x-sort:config="{handle: '[x-sort\\:handle]'}"
            >
                {% include 'django_spire/knowledge/collection/component/x_collection_tree.html' %}

                <x-collection-tree :data="{items: manager.collection_map, id: null}"></x-collection-tree>
            </div>
        </div>
    </div>
{% endblock %}