{% load legacy_filters %}
<div class="clear-both bg-white shadow rounded-lg overflow-x-auto my-6">
<h2 class="text-2xl md:text-2xl font-semibold text-gray-700   m-3 tracking-wide leading-snug">
  {{ header }}</h2>
<table class="w-full border-collapse border border-gray-200">
    <thead>
        <tr class="bg-gray-100 text-left text-sm uppercase">
            {% for field in fields %}
            <th class="border border-gray-200 px-4 py-2 text-left">{% firstof field.verbose_name field.name %} </th>
            {% endfor %}
        </tr>
    </thead>
    <tbody>
        {% for obj in objs %}
            <tr class="hover:bg-gray-50">
                {% for field in fields %}
                <td class="border border-gray-200 px-4 py-2">
                    {% if field.name == 'id' %}
                            {{ obj|attr:field.name }}
                    {% elif field.name == 'file' and obj.file %}
                    <a href="{{ obj.file.url }}" target="_blank">View</a>
                    {% elif field.get_internal_type == "DateTimeField" %}
                        {{ obj|attr:field.name|date:"d/m/Y H:i" }}
                    {% else %}
                        {{ obj|attr:field.name | safe_floatformat:2 }}
                    {% endif %}
                </td>
                {% endfor %}
            </tr>
        {% empty %}
            <tr>
                <td colspan="5" class="py-4 px-4 text-center text-gray-600">No data available.</td>
            </tr>
        {% endfor %}
    </tbody>
</table>
</div>
