<div class="container-fluid">
    <div class="row align-items-center border-bottom mx-1 pb-2">
        <div class="col px-0 text-uppercase pb-2 d-flex align-items-center">
            Collections
        </div>
        <div class="col-auto px-0 pb-2">
            {% if AuthController.knowledge.can_add %}
                {% 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" %}
            {% endif %}
        </div>
        <div class="col-12 px-0">
            <input
                class="rounded-2 p-1 form-control"
                type="text"
                placeholder="Search ..."
                x-model="user_search"
                @input.debounce.300ms="search"
            >
        </div>
    </div>
</div>
<div
    @click.away="hide_menu()"
    @contextmenu.prevent=""
    class="user-select-none pe-3"
    x-sort:config="{
        handle: '[x-sort\\:handle]',
        distance: 20,
        swapThreshold: 0.01
    }"
>
    {% include 'django_spire/knowledge/collection/component/x_collection_navigation.html' %}
    {% include 'django_spire/knowledge/collection/card/context_menu_card.html' %}
    {% include 'django_spire/knowledge/entry/card/context_menu_card.html' %}

    <div class="navigation-items">
        <x-collection-navigation :data="{items: manager.collection_map, id: null}"></x-collection-navigation>
    </div>
    <div class="search-items">
        <template x-for="(item, index) in Array.from(found_items.values())" :key="index">
            <div>
                <template x-if="item?.constructor.name === 'Collection'">
                    <div
                        x-data="{
                            collection: item
                        }"
                    >
                        {% include 'django_spire/knowledge/collection/navigation/item/collection_item.html' with hide_chevron=True %}
                    </div>
                </template>
                <template x-if="item?.constructor.name === 'Entry'">
                    <div
                        x-data="{
                            entry: item
                        }"
                    >
                        {% include  'django_spire/knowledge/entry/navigation/item/navigation_item.html' %}
                    </div>
                </template>
            </div>
        </template>
    </div>
</div>
