{% load bloomerp i18n %}

<div
    class="mb-4 flex flex-col gap-3"
    data-file-browser-folders
    data-current-folder-id="{% if current_folder %}{{ current_folder.id }}{% endif %}"
    data-scope-content-type-id="{{ scoped_content_type_id|default:'' }}"
    data-scope-object-id="{{ scoped_object_id|default:'' }}"
>
    <input type="file" multiple class="hidden" data-upload-input />

    <div class="flex flex-wrap items-center justify-between gap-2">
        {% if breadcrumbs %}
            <c-ui.breadcrumb.body>
                {% for crumb in breadcrumbs %}
                    {% if crumb.active %}
                        <c-ui.breadcrumb.item text="{{ crumb.label }}" separator="chevron" :active="True" />
                    {% else %}
                        <c-ui.breadcrumb.item
                            text="{{ crumb.label }}"
                            hx_get="{{ crumb.url }}"
                            hx_target="#data-view-data-section"
                            hx_swap="innerHTML"
                            separator="chevron"
                            :active="False"
                        />
                    {% endif %}
                {% endfor %}
            </c-ui.breadcrumb.body>
        {% endif %}
    </div>

    {% if navigation_items %}
        <div class="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4" data-folder-list>
            {% for item in navigation_items %}
                <div
                    class="flex items-center justify-between gap-3 rounded-xl border border-gray-200 bg-white p-3 shadow-xs"
                    data-folder-dropzone="{{ item.id }}"
                    data-folder-id="{{ item.id }}"
                    data-item-type="folder"
                    draggable="true"
                >
                    <button
                        type="button"
                        class="flex min-w-0 flex-1 items-center gap-3 text-left"
                        hx-get="{{ item.url }}"
                        hx-target="#data-view-data-section"
                        hx-swap="innerHTML"
                    >
                        <i class="{{ item.icon_class }} shrink-0"></i>
                        <span class="truncate font-medium text-gray-800">{{ item.name }}</span>
                    </button>
                    <div class="flex shrink-0 items-center gap-1">
                        {% for action in file_folder_actions %}
                            {% render_object_action action=action object=item.folder request=request content_type_id=file_folder_content_type_id %}
                        {% endfor %}
                    </div>
                </div>
            {% endfor %}
        </div>
    {% endif %}
</div>