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

{% if not request.htmx.target == 'data-view-data-section' %}
<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="{{ data_view_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">
            <!--Filter-->
            <div class="w-full sm:w-auto" data-data-view-button="filter">
                <c-ui.shortcut_tooltip 
                    position="bottom" 
                    shortcut="mod+1"
                    focus_target="select"
                    >
                    <c-ui.dropdown.body 
                        trigger_text="Filter"
                        trigger_icon_class="fa fa-filter"
                        trigger_button_class="btn-secondary"
                        trigger_class="w-full justify-center gap-2"
                        wrapper_class="w-full"
                        size="sm"
                        width="w-128"
                        >
                        <div class="p-3">
                            <div>
                                <div class="mb-2">
                                    <c-ui.text.subtitle class="mb-2">
                                        Filter
                                    </c-ui.text.subtitle>
                                    
                                    <div id="filter-section-{{ content_type_id }}">
                                        {{ filter_section | safe }}
                                    </div>
                                </div>
                                <button type="button" class="btn btn-primary btn-sm" id="apply-filters-button">
                                    Apply Filters
                                </button>
                            </div>
                        </div>
                    </c-ui.dropdown.body>
                </c-ui.shortcut_tooltip>
            </div>

            <!--Add button-->
            <div data-data-view-button="add">    
                <c-ui.shortcut_tooltip 
                    position="bottom"
                    action="click"
                    shortcut="mod+2"
                    >
                    <button 
                        class="btn btn-sm btn-secondary w-full justify-center sm:w-auto"
                        data-dataview-add-button="true"
                        hx-push-url="false"
                        bloomerp-open-modal="create-object-modal"
                        hx-get="{% url 'components_create_object' content_type_id=content_type_id %}{% if create_querystring %}?{{ create_querystring }}{% endif %}"
                        hx-target="#create-object-modal-body"
                        hx-swap="innerHTML"
                    >
                        <i class="fa fa-plus"></i>
                        <span>Add</span>
                    </button>
                </c-ui.shortcut_tooltip>
            </div>

            <!--Bulk actions button-->
            <div data-data-view-button="bulk-actions">
                <c-ui.shortcut_tooltip position="bottom" shortcut="mod+3">
                    <c-ui.dropdown.body 
                        trigger_text="Bulk Actions"
                        trigger_icon_class="fa fa-list-check"
                        trigger_button_class="btn-secondary"
                        size="sm"
                        >
                        <c-ui.dropdown.item 
                            text="Use current selection"
                            id="bulk-actions-selection-btn"
                            />
                        <c-ui.dropdown.item 
                            text="Select all filtered" 
                            id="bulk-actions-all-btn"
                            />
                    </c-ui.dropdown.body>
                </c-ui.shortcut_tooltip>
            </div>

            <!--Export button-->
            <div data-data-view-button="export">
                <c-ui.shortcut_tooltip 
                    position="bottom"  
                    shortcut="mod+4">
                    <button 
                        class="btn btn-sm btn-secondary w-full justify-center sm:w-auto"
                        data-dataview-add-button="true"
                        hx-push-url="false"
                        bloomerp-open-modal="export-objects-modal"
                        hx-get="{% url 'components_export_objects' content_type_id=content_type_id %}{% if export_querystring %}?{{ export_querystring }}{% endif %}"
                        hx-target="#export-objects-modal-body"
                        hx-swap="innerHTML"
                    >
                        <i class="fa-solid fa-download"></i>
                        Export
                    </button>
                </c-ui.shortcut_tooltip>
            </div>
            

            <!--Display options-->
            <div class="w-full sm:w-auto" data-data-view-button="display-options">
                <c-ui.shortcut_tooltip 
                    position="bottom" 
                    shortcut="mod+5">
                    <c-ui.dropdown.body 
                        trigger_text="Display"
                        trigger_icon_class="fa fa-sliders"
                        trigger_button_class="btn-secondary"
                        trigger_class="w-full justify-center gap-2"
                        wrapper_class="w-full"
                        size="sm"
                        width="w-80"
                        >
                    
                    <div class="p-2" id="data-table-display-options-{{ content_type_id }}">
                        <c-features.dataviews.display_options 
                            :content_type_id="content_type_id"
                            :view_types="view_types"
                            :preference="preference"
                            :fields="fields"
                            :accessible_fields="accessible_fields"
                            :csrf_token="csrf_token"
                        />
                    </div>
                    
                    </c-ui.dropdown.body>
                </c-ui.shortcut_tooltip>
            </div>
            
            <!--Select-->
            <div data-data-view-button="select-preference">
                <c-ui.shortcut_tooltip position="bottom" shortcut="mod+6">
                    <c-features.preferences.select_preference_button
                        type="list"
                        :content_type_id="content_type_id"
                        selected_preference_name="{{ preference.name }}"
                    />
                </c-ui.shortcut_tooltip>
            </div>
        </div>
    </div>
{% endif %}

    <!--Table section-->
    <div id="data-view-data-section" class="h-full">
        {% 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 %}
    </div>

{% if not request.htmx.target == 'data-view-data-section' %}
    <!-- 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 %}