{% load i18n %}
<div class="overflow-hidden border border-gray-100 rounded-2xl">
    <div class="bg-gradient-to-r from-yellow-50 to-amber-50 px-6 py-4 border-b border-gray-100 flex justify-between items-center">
        <h3 class="font-bold text-lg flex items-center gap-2">
            <i data-lucide="eye" class="w-5 h-5 text-yellow-500"></i>
            {% trans "Observations" %}
        </h3>
        <div class="flex gap-2">
            <button class="bulk-action-btn px-4 py-2 border-2 border-yellow-500 text-yellow-600 rounded-xl font-semibold hover:bg-yellow-50 transition text-sm" data-tab="observations" disabled>
                {% trans "Bulk Action" %}
            </button>
            <a href="#" class="px-4 py-2 bg-yellow-500 text-white rounded-xl font-semibold hover:bg-yellow-600 transition text-sm">
                {% trans "View All" %}
            </a>
        </div>
    </div>
    <div class="overflow-x-auto">
        <table class="w-full">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">
                        <input type="checkbox" class="bulk-checkbox-all w-4 h-4 rounded border-gray-300">
                    </th>
                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "ID" %}</th>
                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Category" %}</th>
                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Location" %}</th>
                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Status" %}</th>
                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Created" %}</th>
                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Actions" %}</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
                {% for observation in data.object_list %}
                <tr class="hover:bg-gray-50 transition">
                    <td class="px-6 py-4">
                        <input type="checkbox" class="bulk-checkbox w-4 h-4 rounded border-gray-300" value="{{ observation.id }}">
                    </td>
                    <td class="px-6 py-4 text-sm font-semibold text-gray-600">#{{ observation.id }}</td>
                    <td class="px-6 py-4">
                        <a href="#" class="font-semibold text-gray-800 hover:text-yellow-600 transition">
                            {{ observation.category }}
                        </a>
                    </td>
                    <td class="px-6 py-4 text-sm text-gray-600">{{ observation.location }}</td>
                    <td class="px-6 py-4">
                        <span class="px-2.5 py-1 rounded-lg text-xs font-bold {% if observation.status == 'open' %}bg-yellow-100 text-yellow-600{% elif observation.status == 'in_progress' %}bg-blue-100 text-blue-600{% elif observation.status == 'resolved' %}bg-green-100 text-green-600{% else %}bg-gray-100 text-gray-600{% endif %}">
                            {{ observation.get_status_display }}
                        </span>
                    </td>
                    <td class="px-6 py-4 text-sm text-gray-600">
                        {{ observation.created_at|date:"M d, Y" }}
                    </td>
                    <td class="px-6 py-4">
                        <a href="#" class="inline-flex items-center gap-1 text-yellow-600 hover:text-yellow-700 text-sm font-semibold">
                            {% trans "View" %}
                            <i data-lucide="arrow-right" class="w-4 h-4"></i>
                        </a>
                    </td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan="7" class="px-6 py-12 text-center text-gray-500">
                        <i data-lucide="eye" class="w-12 h-12 mx-auto mb-3 text-gray-300"></i>
                        <p class="font-semibold">{% trans "No observations found" %}</p>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% if data.has_other_pages %}
    <div class="px-6 py-4 border-t border-gray-100 flex justify-between items-center">
        <div class="text-sm text-gray-500">
            {% trans "Showing" %} <span class="font-bold">{{ data.start_index }}</span>-<span class="font-bold">{{ data.end_index }}</span> {% trans "of" %} <span class="font-bold">{{ data.paginator.count }}</span> {% trans "observations" %}
        </div>
        <div class="flex gap-2">
            {% if data.has_previous %}
            <a href="?page={{ data.previous_page_number }}&tab=observations" class="px-3 py-1.5 border border-gray-200 rounded-lg text-sm font-semibold hover:bg-gray-50 transition">
                {% trans "Previous" %}
            </a>
            {% endif %}
            <span class="px-3 py-1.5 bg-yellow-500 text-white rounded-lg text-sm font-bold">
                {{ data.number }}
            </span>
            {% if data.has_next %}
            <a href="?page={{ data.next_page_number }}&tab=observations" class="px-3 py-1.5 border border-gray-200 rounded-lg text-sm font-semibold hover:bg-gray-50 transition">
                {% trans "Next" %}
            </a>
            {% endif %}
        </div>
    </div>
    {% endif %}
</div>