{% load render_table from django_tables2 %}
{% load django_tables2 %}
{% load humanize %}

<div x-data="handleBulkSelect()" class="relative  bg-white">
    
    {% if table.paginated_rows %}
    <div class="sticky left-0 top-0 z-30 w-full bg-white">
        {% include "htmx/table/header.html" %}
        {% include "htmx/table/bulkaction.html" %}
    </div>
    {% endif %}
    
    <div class="overflow-auto min-h-[400px] max-h-[700px]"> 
        {% if table.paginated_rows %}
            <table class="table min-w-full text-sm" {{ table.attrs.as_html }}>
                {% if table.show_header %}
                <thead class="bg-gray-100 backdrop-blur-sm sticky top-0 z-20">
                    <tr>
                        {% for column in table.columns %}
                        <th class="px-4 py-3.5 text-left font-bold text-gray-900 border-b border-gray-200 whitespace-nowrap" {{ column.attrs.th.as_html }}>
                            {% if column.orderable %}
                                <a href="javascript:void(0)"
                                    hx-get="{% querystring table.prefixed_order_by_field=column.order_by_alias.next %}"
                                    hx-target="#htmx-data-container"
                                    class="group inline-flex items-center gap-1.5 cursor-pointer hover:text-indigo-600 transition-colors">
                                    {{ column.header }}
                                    <span class="flex-none rounded text-gray-400 group-hover:text-indigo-500">
                                        {% if column.is_ordered %}
                                            {% if column.order_by_alias.is_descending %}
                                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
                                            {% else %}
                                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"/></svg>
                                            {% endif %}
                                        {% else %}
                                            <svg class="w-4 h-4 opacity-0 group-hover:opacity-100 transition-opacity" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"></path></svg>
                                        {% endif %}
                                    </span>
                                </a>
                            {% else %}
                                {{ column.header }}
                            {% endif %}
                        </th>
                        {% endfor %}
                    </tr>
                </thead>
                {% endif %}

                <tbody class="divide-y divide-gray-200 bg-white">
                    {% for row in table.paginated_rows %}
                    <tr class="hover:bg-slate-100 transition-colors cursor-pointer"
                        {{ row.attrs.as_html }}>

                        {% for column, cell in row.items %}
                            <td class="px-4 py-3 text-gray-600 whitespace-nowrap border-b border-gray-100" {{ column.attrs.td.as_html }}>
                                {{ cell }}
                            </td>
                        {% endfor %}
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        {% else %}
            <div class="px-6 py-20 text-center">
                <div class="flex flex-col items-center justify-center space-y-2">
                    <p class="text-gray-500 text-xl font-medium pt-20">{{ table.empty_text|default:"No records found." }}</p>
                </div>
            </div>
        {% endif %}
    </div>
    {% if table.paginated_rows %}
        {% include "htmx/table/pagination.html" %}
    {% endif %}

</div>