<template x-component="collection-navigation">
    <div
        x-sort="await move_collection({collection: $item, order: $position, new_parent: data.id})"
        x-sort:group="collection"
    >
        <template x-for="collection in data.items" :key="collection.id">
            <div
                x-sort:item="collection"
                :id="collection.name"
                class="my-1 ms-4 collection"
                @dragstart="toggle_dragging(true)"
                @dragend="toggle_dragging(false)"
            >
                {% include 'django_spire/knowledge/collection/navigation/item/collection_item.html' %}
                <div x-show="collection.show_details" class="my-1">
                    <x-collection-navigation :data="{items: collection.children, id: collection.id}"></x-collection-navigation>
                    <div class="ms-4">
                        <div
                            x-sort="await move_entry({entry: $item, collection: collection, order: $position})"
                            x-sort:group="entry"
                        >
                            <template x-for="entry in collection.entries" :key="entry.version_id">
                                <div
                                    class="entry"
                                    x-sort:item="entry"
                                    :id="entry.name"
                                    @dragstart="toggle_dragging(true)"
                                    @dragend="toggle_dragging(false)"
                                >
                                    {% include  'django_spire/knowledge/entry/navigation/item/navigation_item.html' %}
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </div>
        </template>
    </div>
</template>
