{% load i18n static unfold_list %}

{# The toolbar also holds the grid/page-size/filter controls: render it without search_fields too #}
{% if cl.search_fields or cl.model_admin.using_grid_view == True or cl.model_admin.using_page_size == True or cl.has_filters and cl|unfold_vertical_filters %}
    <!-- CHỈ thêm class tailwind để trong đẹp hơn -->
    <div id="toolbar" class="flex items-center gap-2 w-full">
        {% if cl.search_fields %}
        <form {% if not cl.is_dataset %}id="changelist-search"{% endif %} method="get" role="search" class="flex items-center gap-2 flex-1 min-w-0">
            <div class="bg-white border border-base-200 flex rounded overflow-hidden shadow-xs h-9 w-full
            focus-within:ring-3 focus-within:ring-primary-300 focus-within:border-primary-600 dark:bg-base-900 dark:border-base-700 dark:focus-within:border-primary-600 dark:focus-within:ring-primary-700 dark:focus-within:ring-opacity-50">
                <input class="font-medium grow min-w-0 h-9 px-3 text-font-default-light focus:outline-hidden dark:bg-base-900 dark:text-font-default-dark placeholder-shown:truncate placeholder-base-400" type="text" name="{{ search_var }}" value="{{ cl.query }}" {% if not cl.is_dataset %}id="searchbar"{% endif %} placeholder="{% if cl.search_help_text %}{{ cl.search_help_text }}{% else %}{% trans "Type to search" %}{% endif %}" />

                <button type="submit" class="flex items-center px-2 focus:outline-hidden h-9" id="searchbar-submit">
                    <span class="material-symbols-outlined md-32 text-base-400 dark:text-base-500">search</span>
                </button>
            </div>

            {% for pair in cl.filter_params.items %}
                {% for val in pair.1 %}
                    {% if pair.0 != search_var %}<input type="hidden" name="{{ pair.0 }}" value="{{ val }}">{% endif %}
                {% endfor %}
            {% endfor %}
        </form>
        {% else %}
        <div class="flex-1"></div>
        {% endif %}

        {% if cl.model_admin.using_grid_view == True %}
        <form method="post" action="">
           {% csrf_token %}
            {% if cl.wn_grid_view %}
                <input type="hidden" name="grid_view" value="0">
                <button type="submit" 
                style="font-size: 1.2rem"
                class="flex items-center justify-center h-9 w-9 material-symbols-outlined text-base-500 bg-white border border-base-200 dark:bg-base-900 dark:border-base-700 cursor-pointer font-medium group rounded-sm shadow-xs">table_view</button>
            {% else %}
                <input type="hidden" name="grid_view" value="1">
                <button type="submit" 
                style="font-size: 1.2rem"
                class="flex items-center justify-center h-9 w-9 material-symbols-outlined text-base-500 bg-white border border-base-200 dark:bg-base-900 dark:border-base-700 cursor-pointer font-medium group rounded-sm shadow-xs">grid_view</button>
            {% endif %}
        </form>
        {% endif %}

        {# Dropdown chọn số lượng hiển thị #}
        {% if cl.model_admin.using_page_size == True %}
        <form method="post" action="" class="">
            {% csrf_token %}
            <select name="per_page" id="per_page" class="h-9 w-16 pl-2 pr-2 ui-select text-sm text-base-500 rounded-sm shadow-xs border border-base-200 bg-white dark:bg-base-900 dark:border-base-700 focus:outline-hidden flex items-center group-hover:text-primary-600 dark:group-hover:text-primary-500 cursor-pointer"
            onchange="this.form.submit()">
                <option disabled >{{ _('Items per page') }}</option>
                {% for size in cl.model_admin.page_sizes %}
                    <option value="{{ size }}" {% if cl.list_per_page == size %}selected{% endif %}>{{ size }}</option>
                {% endfor %}
            </select>
        </form>  
        {% endif %}
        {% if cl.has_filters and cl|unfold_vertical_filters %}
            <a title="{% trans 'Filters' %}" aria-label="{% trans 'Filters' %}" class="filter-open-button h-9 rounded-sm shadow-xs {% if cl.has_active_filters %}bg-primary-600 border-primary-600 text-white{% else %}bg-white border-base-200 hover:text-primary-600 dark:bg-base-900 dark:border-base-700 dark:hover:text-primary-500{% endif %} border cursor-pointer flex font-medium gap-2 group items-center px-3 py-2 rounded-default shadow-2xs text-sm lg:ml-auto md:mt-0 {% if not cl.model_admin.list_filter_sheet %}2xl:hidden{% endif %}" x-on:click="filterOpen = true" x-on:keydown.escape.window="filterOpen = false">
                <span class="material-symbols-outlined md-18 ml-auto" style="font-size: 1.2rem">filter_list</span>
            </a>
        {% endif %}

    </div>
{% endif %}