{% load partials %}

{% if use_crispy %}
    {% load crispy_forms_tags %}
{% endif %}

<style>
    .table-max-height {
        max-height: calc((100vh - {{ table_pixel_height_other_page_elements }}) * {{ table_max_height }} / 100);
    }
    
    /* Match header text with table size */      
    .table-sm th {
        font-size: 0.875rem;
    }
    
    /* For Bootstrap's table-sm */
    .table-sm td {
        padding: 0.25rem;
    }
</style>

<div class="table-responsive table-max-height">
    <table class="table {{ table_classes }} w-auto">
        <thead>
            <tr>
                {% for header, field_name in headers %}
                <th class="bg-primary text-center text-white text-wrap align-middle text-truncate table-column-width"
                    style="cursor: pointer; position: sticky; top: 0; z-index: 1;"
                    {% if use_htmx %}
                    hx-get="?sort={% if current_sort == field_name %}-{% elif current_sort == '-'|add:field_name %}{% else %}{% endif %}{{ field_name }}{% if filter_params %}&{{ filter_params }}{% endif %}"
                    hx-headers='{"X-Filter-Sort-Request": "true"}'
                    hx-target="#filtered_results"
                    hx-push-url="true"
                    hx-trigger="click"
                    {% else %}
                    onclick="window.location.href='?sort={% if current_sort == field_name %}-{% elif current_sort == '-'|add:field_name %}{% else %}{% endif %}{{ field_name }}{% if filter_params %}&{{ filter_params }}{% endif %}'"
                    {% endif %}>
                    <span class="d-block w-100 h-100">
                        {{ header }}
                        {% if current_sort == field_name %}
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="1em" height="1em" class="d-inline-block">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                            </svg>
                        {% elif current_sort == '-'|add:field_name %}
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="1em" height="1em" class="d-inline-block">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
                            </svg>
                        {% endif %}
                    </span>
                </th>
                {% endfor %}
                <th class="bg-secondary text-center text-white align-middle"
                    style="position: sticky; top: 0; z-index: 1;">
                    <span>Actions</span>
                </th>
            </tr>
        </thead>
            <tbody>
                {% for object in object_list %}
                <tr class="text-center">
                    {% for field in object.fields %}
                    <td class="{% if forloop.first %}fw-medium{% endif %} py-0 align-middle text-truncate table-column-width px-2"
                        data-bs-toggle="tooltip"
                        data-bs-title="{{field}}"
                        data-bs-placement="top"
                        data-bs-custom-class="custom-tooltip">
                        {{ field }}
                    </td>
                    {% endfor %}
                    <td class="text-end py-1 align-middle">
                        {{ object.actions }}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
</div>
