<!---
Description: This snippet is used to render the filter section of the list view. It includes the search bar, filter button, settings button, and save filter button.

Variables:
    - content_type_id: The id of the content type of the model being displayed.
    - application_fields: A list of fields of the model being displayed.
    - target: The id of the element that will be updated with the new content when the filter is applied.
    - include_actions: A boolean that indicates if the actions column should be included in the table.
    - initial_query: Initial query
    -->
{% load static %}
{% load bloomerp %}

<div class="d-flex justify-content-between">

    <!-- Search -->
    <div class="d-flex">
        <input 
            type="text" 
            class="form-control form-control-sm" 
            placeholder="Search" 
            autocomplete="off"
            name="data_table_string_search"
            hx-get="{% url 'components_data_table' %}?data_table_content_type_id={{ content_type_id }}&data_table_include_actions={{ include_actions }}{% if initial_query %}&{{initial_query}}{% endif %}"
            hx-target="{{ target }}"
            hx-swap="innerHTML"
            hx-include="#filterForm"
            hx-trigger="keyup delay:500ms"
            >
    </div>
    <!-- End search -->

    <div class="d-flex">

        <!-- Filter button -->
        <div class="dropdown">
            <button
                    class="btn btn-borderless bg-transparent text-dark btn-sm"
                    type="button"
                    data-bs-toggle="dropdown"
                    data-bs-auto-close="outside"
                    aria-expanded="false">
                    <img src="{% static 'bloomerp/icons/filter.svg' %}" height="20" alt="Filter"/>
            </button>
        
            <div class="dropdown-menu filter-dropdown-menu dropdown-menu-arrow" id="filterDropdown">
                    <form 
                        hx-get="{% url 'components_data_table' %}?data_table_content_type_id={{ content_type_id }}&data_table_include_actions={{ include_actions }}"
                        hx-target="{{ target }}"
                        hx-swap="innerHTML"
                        hx-trigger="submit"
                        id="filterForm"
                        >
                        <div
                            class="row justify-content-center align-items-center g-2"
                            id="filterInputContainer"
                            hx-get="{% url 'components_list_view_filter_inputs' %}?step=row&content_type_id={{ content_type_id }}"
                            hx-target="#filterInputContainer"
                            hx-swap="innerHTML"
                            hx-trigger="load"
                        >
                            
                        </div>

                        <hr>

                        <!-- Apply filters section -->
                        <div class="d-flex justify-content-between align-items-center">

                            <a 
                                href="#" 
                                class="d-flex align-items-center gap-1"
                                hx-get="{% url 'components_list_view_filter_inputs' %}?step=row&content_type_id={{ content_type_id }}"
                                hx-target=".new-filter-input-row"
                                hx-swap="outerHTML"
                                >
                                <img src="{% static 'bloomerp/icons/add.svg' %}" height="16" alt="Add filter"/>
                                <span class="text-muted" style="font-size: 0.875rem;">Add new filter</span>
                            </a>

                            <div class="d-flex gap-2">
                                <button 
                                    class="btn btn-sm btn-primary"
                                    type="submit">
                                        Apply filter
                                </button>
                                <button 
                                    class="btn btn-sm btn-secondary" 
                                    type="button"
                                    hx-get="{% url 'components_data_table' %}?data_table_content_type_id={{ content_type_id }}&data_table_include_actions=true"
                                    hx-target="{{ target }}"
                                    hx-swap="innerHTML"
                                    hx-trigger="click"
                                    hx-on::after-request="console.log('after request')"
                                        >Remove filters
                                </button>
                            </div>
                        </div>
                        <!-- End apply filters section -->
                    </form>
            </div>
        </div>
        <!-- End filter button -->
        

        <!-- Settings -->
        <div class="dropdown">
            <button
                    class="btn btn-borderless bg-transparent text-dark btn-sm"
                    type="button"
                    data-bs-toggle="dropdown"
                    data-bs-auto-close="outside"
                    aria-expanded="false">
                    <img src="{% static 'bloomerp/icons/dots.svg' %}" height="20" alt="Settings"/>
            </button>
        
            <ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                <li><a class="dropdown-item" href="{% url "users_my_profile_list_view_preference" %}?content_type_id={{ content_type_id }}&return_to={{ request.path }}">Select fields</a></li>
                <li><a 
                        class="dropdown-item btn"
                        hx-get="{% url 'components_data_table' %}?data_table_content_type_id={{ content_type_id }}&data_table_include_actions=true&data_table_download=csv"
                        hx-include="#filterForm"
                        hx-swap="none"
                        hx-ext="htmx-download"
                        >Download csv
                    </a>
                </li>
                <li><a 
                        class="dropdown-item btn"
                        hx-get="{% url 'components_data_table' %}?data_table_content_type_id={{ content_type_id }}&data_table_include_actions=true&data_table_download=xlsx"
                        hx-include="#filterForm"
                        hx-swap="none"
                        hx-ext="htmx-download"
                        >Download xlsx
                    </a>
                </li>
            </ul>
        </div>
        <!-- End Settings -->
    </div>
</div>
<script>
    function removeFilterInputRow(element) {
        const filterInputRow = element.closest('.filter-input-row');
        filterInputRow.remove();
    }
</script>

