{% load octopusdash_tags %}
{% load octopusdash_querystring_tag %}
<thead class="bg-gray-100 dark:bg-gray-800 rounded-t  overflow-visible ">
    <!-- Control filters -->
    <tr class="relative z-[1] overflow-visible">
        <th
            class="px-4 w-10 py-2 text-left text-sm border-r border-gray-300 dark:border-gray-700 font-semibold text-gray-700 dark:text-gray-300">
            <input id="checkbox-toggle-all" type="checkbox"
                class="checkbox-toggle-all appearance-none w-4 h-4 border border-gray-400 dark:border-gray-600 rounded-sm bg-white dark:bg-gray-800 checked:bg-indigo-500 checked:border-transparent focus:ring-2 focus:ring-indigo-400">
        </th>
        {% for field in formset.forms.0.headers %}
        {% with field as field_name %}
        
        {% if field_name != 'id' %}
                    {% replace field_name '_' ' ' as field %}
            {% join field_name '_start' as dt_start_field %}
            {% join field_name '_end' as dt_end_field %}
            {% if request.GET|get:field_name and request.GET|get:field_name != 'none' or request.GET|get:dt_start_field or request.GET|get:dt_end_field   %}
                <th data-tippy="remove filter" class="relative z-10 px-4 overflow-visible py-2 text-left text-sm border-r dark:bg-blue-200 border-gray-300  dark:border-gray-700 font-semibold text-gray-700 dark:text-gray-300">
                    <div class="flex items-center justify-between">
                        {{ field.title }}
                        <a href="{% if request.GET|get:dt_end_field or request.GET|get:dt_start_field %}{% od_querystring dt_end_field_var=None dt_start_field_var=None %}{% else %}{% od_querystring field_name_var=None %}{% endif %}">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
                            </svg>
                        </a>
                    </div>
                </th>
                {% else %}
                <th  class="relative z-10 px-4 overflow-visible py-2 text-left text-sm border-r  border-gray-300 dark:border-gray-700 font-semibold text-gray-700 dark:text-gray-300">
                    {{ field.title }}
                </th>
            {% endif %}

        {% endif %}
        {% endwith %}
        {% endfor %}
                <th  class="relative z-10 px-4 overflow-visible py-2 text-left text-sm border-r  border-gray-300 dark:border-gray-700 font-semibold text-gray-700 dark:text-gray-300">
                    Actions
                </th>
    </tr>
</thead>
