{% load bloomerp %}
{% load crispy_forms_tags %}

{% if not is_data_section_request %}
<div 
    id="data-view-{{ content_type_id }}"
    data-view-type="{{ preference.view_type }}"
    data-content-type-id="{{ content_type_id }}"
    data-render-id="{{ render_id }}"
    data-url="{{ data_view_url }}"
    data-base-url="{{ dataview_base_url }}"
    data-full-create-url="{{ full_create_url|default:'' }}"
    data-sync-url="{{ sync_url|yesno:'true,false' }}"
    data-preference-id="{{ preference.pk }}"
    class="flex flex-col"
    bloomerp-component="{{ component_id | default:'dataview-container' }}"
    data-split-view-enabled="{{ preference.split_view_enabled }}"
    data-default-filters='{{ default_filters_json }}'

    {% if component_args %}
    {% for arg, value in component_args.items %}
    data-{{ arg }}="{{ value }}"
    {% endfor %}
    {% endif %}

    >
    <!--Search inputs-->
    <div class="mb-4 flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
        <div class="flex min-w-0 flex-1 flex-col gap-2 sm:flex-row sm:items-center sm:gap-3">
            
            <c-ui.shortcut_tooltip 
                shortcut="mod+/" 
                action="focus" 
                position="bottom" 
                target="#data-view-search-input-{{ content_type_id }}">
                <div class="flex w-full items-center gap-3 rounded-xl border border-gray-200 bg-white px-2 py-1 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary sm:max-w-80 sm:flex-none">
                    <span class="pointer-events-none shrink-0 text-gray-400">
                        <i class="fa fa-search"></i>
                    </span>
                    <input
                        type="text"
                        name="q"
                        value="{{ search_query }}"
                        placeholder="Search..."
                        class="w-full border-0 bg-transparent p-0 text-sm text-gray-700 placeholder:text-gray-400 focus:outline-none focus:ring-0"
                        id="data-view-search-input-{{ content_type_id }}"
                    />
                </div>
            </c-ui.shortcut_tooltip>

            <!--Applied filters-->
            <div id="applied-filters-{{ content_type_id }}" class="min-w-0 flex gap-2" data-applied-filters-section></div>
            <!--End applied filters-->

        </div>

        <div class="flex w-full flex-wrap gap-2 sm:w-auto sm:justify-end">
            {% for rendered_action in rendered_dataview_actions %}
                {{ rendered_action|safe }}
            {% endfor %}
        </div>
    </div>
{% endif %}

    <!--Table section-->
{% if not is_data_section_request %}
    <div id="data-view-data-section" class="h-full">
{% endif %}
        {{ before_data_view|safe }}
        {% if preference.split_view_enabled %}
        <div class="flex h-[calc(100vh-200px)] w-full min-w-0 overflow-hidden rounded-xl" data-split-view-container>
            <div class="flex-none w-1/2 min-w-[260px] max-w-[calc(100%-260px)] resize-x overflow-auto border-r border-gray-200 pr-2" id="data-table-list-pane" data-split-view-list-pane>
                {{ rendered_dataview|safe }}
            </div>
            <div class="w-1 cursor-col-resize bg-gray-200 hover:bg-gray-300 transition-colors" data-split-view-divider></div>
            <div class="min-w-0 flex-1 overflow-auto pl-2" id="data-table-detail-pane" data-split-view-detail-pane id="split-view-detail-pane">
                <div class="flex items-center justify-center h-full text-gray-400">
                    <div class="text-center">
                        <c-icons.sidebar_right size="48" class="mx-auto mb-2 opacity-50"/>
                        <p>Select an item to view details</p>
                    </div>
                </div>
            </div>
        </div>
        {% else %}
            {{ rendered_dataview|safe }}
        {% endif %}

        {% if show_global_pagination and page_obj.paginator.num_pages > 1 %}
        <div class="mt-3 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between" data-testid="data-view-pagination">
            <p class="text-sm text-gray-500">
                {% if page_obj.paginator.count %}
                    Showing {{ page_obj.start_index }}-{{ page_obj.end_index }} of {{ page_obj.paginator.count }} results
                {% else %}
                    Showing 0 of 0 results
                {% endif %}
            </p>
            <nav aria-label="Pagination" class="flex items-center gap-2">
                <div class="join">
                    <button
                        class="btn btn-sm join-item"
                        {% if not page_obj.has_previous %}disabled{% endif %}
                        hx-get="{{ request.path }}{% if page_querystring %}?{{ page_querystring }}&page=1{% else %}?page=1{% endif %}"
                        hx-target="#data-view-data-section"
                        hx-swap="innerHTML"
                    >
                        First
                    </button>
                    <button
                        class="btn btn-sm join-item"
                        {% if not page_obj.has_previous %}disabled{% endif %}
                        {% if page_obj.has_previous %}hx-get="{{ request.path }}{% if page_querystring %}?{{ page_querystring }}&page={{ page_obj.previous_page_number }}{% else %}?page={{ page_obj.previous_page_number }}{% endif %}"{% endif %}
                        hx-target="#data-view-data-section"
                        hx-swap="innerHTML"
                    >
                        Prev
                    </button>
                    {% for page_number in pagination_pages %}
                        {% if page_number %}
                            {% if page_number == page_obj.number %}
                                <button class="btn btn-sm join-item btn-primary" disabled>
                                    {{ page_number }}
                                </button>
                            {% else %}
                                <button
                                    class="btn btn-sm join-item"
                                    hx-get="{{ request.path }}{% if page_querystring %}?{{ page_querystring }}&page={{ page_number }}{% else %}?page={{ page_number }}{% endif %}"
                                    hx-target="#data-view-data-section"
                                    hx-swap="innerHTML"
                                >
                                    {{ page_number }}
                                </button>
                            {% endif %}
                        {% else %}
                            <span class="px-2 text-gray-400">…</span>
                        {% endif %}
                    {% endfor %}
                    <button
                        class="btn btn-sm join-item"
                        {% if not page_obj.has_next %}disabled{% endif %}
                        {% if page_obj.has_next %}hx-get="{{ request.path }}{% if page_querystring %}?{{ page_querystring }}&page={{ page_obj.next_page_number }}{% else %}?page={{ page_obj.next_page_number }}{% endif %}"{% endif %}
                        hx-target="#data-view-data-section"
                        hx-swap="innerHTML"
                    >
                        Next
                    </button>
                    <button
                        class="btn btn-sm join-item"
                        {% if not page_obj.has_next %}disabled{% endif %}
                        hx-get="{{ request.path }}{% if page_querystring %}?{{ page_querystring }}&page={{ page_obj.paginator.num_pages }}{% else %}?page={{ page_obj.paginator.num_pages }}{% endif %}"
                        hx-target="#data-view-data-section"
                        hx-swap="innerHTML"
                    >
                        Last
                    </button>
                </div>
                <span class="text-sm text-gray-500">
                    Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
                </span>
            </nav>
        </div>
        {% endif %}
{% if not is_data_section_request %}
    </div>
{% endif %}

{% if not is_data_section_request %}
    <!-- Context Menu Dropdown -->
    <div id="data-table-{{ content_type_id }}-context-menu" class="hidden fixed bg-white shadow-lg rounded-xl border border-gray-200 z-50 min-w-[160px]">
        <ul class="py-1">
            
        </ul>
    </div>
    
    <!--Modals-->
    <c-ui.modal id="edit-object-modal" header_class="" title="Edit object" body_class="" footer_class="" footer_slot="" size=""></c-ui.modal>
    <c-ui.modal id="delete-object-modal" header_class="" title="Delete object" body_class="" footer_class="" footer_slot="" size=""></c-ui.modal>
    <c-ui.modal id="export-objects-modal" title="Export"/>
    <c-ui.modal id="bulk-actions-modal" title="Bulk actions"/>

</div>
{% endif %}