{% load djresource_tags %}
{% include "djresource/tailwind/_filters.html" %}
{% if search_enabled %}
<form method="get" class="mb-4 flex gap-2">
    <input type="text" name="q" value="{{ search_query }}" placeholder="Rechercher..."
           class="border border-gray-300 rounded px-3 py-2 w-64">
    <button type="submit" class="bg-gray-200 hover:bg-gray-300 px-4 py-2 rounded">Rechercher</button>
    {% if search_query %}
    <a href="{% url url_list %}" class="px-4 py-2 text-blue-600 hover:underline">Réinitialiser</a>
    {% endif %}
</form>
{% endif %}

<div class="bg-white rounded shadow overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
    <thead class="bg-gray-50">
        <tr>
            {% for field in list_display %}
            <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600">
                {% if field in resource.ordering_fields %}
                    <a href="?sort={{ field }}&dir={% if current_sort == field and current_dir == 'asc' %}desc{% else %}asc{% endif %}{% if search_query %}&q={{ search_query }}{% endif %}"
                       class="hover:underline">
                        {{ field|capfirst }}
                        {% if current_sort == field %}{% if current_dir == 'asc' %}▲{% else %}▼{% endif %}{% endif %}
                    </a>
                {% else %}
                    {{ field|capfirst }}
                {% endif %}
            </th>
            {% endfor %}
            <th class="px-4 py-2 text-right text-sm font-semibold text-gray-600">Actions</th>
        </tr>
    </thead>
    <tbody class="divide-y divide-gray-100">
        {% for object in object_list %}
        <tr class="hover:bg-gray-50">
            {% for field in list_display %}
            <td class="px-4 py-2 text-sm text-gray-800">{{ object|get_attr:field }}</td>
            {% endfor %}
            <td class="px-4 py-2 text-right text-sm space-x-2">
                <a href="{% url url_detail object|get_attr:resource.lookup_field %}" class="text-gray-600 hover:underline">Voir</a>
                <a href="{% url url_update object|get_attr:resource.lookup_field %}" class="text-blue-600 hover:underline">Modifier</a>
                <a href="{% url url_delete object|get_attr:resource.lookup_field %}" class="text-red-600 hover:underline">Supprimer</a>
            </td>
        </tr>
        {% empty %}
        <tr>
            <td colspan="{{ list_display|length|add:1 }}" class="text-center text-gray-400 py-6">Aucun résultat.</td>
        </tr>
        {% endfor %}
    </tbody>
</table>
</div>

{% if is_paginated %}
<div class="mt-4 flex gap-2 items-center text-sm">
    {% if page_obj.has_previous %}
    <a href="?page={{ page_obj.previous_page_number }}{% if search_query %}&q={{ search_query }}{% endif %}" class="px-3 py-1 border rounded hover:bg-gray-100">Précédent</a>
    {% endif %}
    <span class="text-gray-500">Page {{ page_obj.number }} / {{ page_obj.paginator.num_pages }}</span>
    {% if page_obj.has_next %}
    <a href="?page={{ page_obj.next_page_number }}{% if search_query %}&q={{ search_query }}{% endif %}" class="px-3 py-1 border rounded hover:bg-gray-100">Suivant</a>
    {% endif %}
</div>
{% endif %}