<div class="divide-y" role="listbox" aria-label="Search results">
    {% for object in object_list %}
    <div id="result-option-{{ forloop.counter0 }}"
         role="option"
         aria-selected="false"
         tabindex="-1"
         class="p-4 cursor-pointer">
        <h3 class="text-lg font-semibold">
            <a href="{{ object.get_absolute_url }}" class="hover:text-blue-600">
                {{ object }}
            </a>
        </h3>

        {% if object.description %}
        <p class="mt-2 text-sm text-gray-600">
            {{ object.description|truncatewords:30 }}
        </p>
        {% endif %}

        {% block object_metadata %}
        <div class="mt-2 flex flex-wrap gap-2">
            {% if object.created_at %}
            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
                Added {{ object.created_at|date }}
            </span>
            {% endif %}

            {% if object.average_rating %}
            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                {{ object.average_rating }} ★
            </span>
            {% endif %}

            {% if object.location.exists %}
            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                {{ object.location.first.get_formatted_address }}
            </span>
            {% endif %}
        </div>
        {% endblock %}
    </div>
    {% empty %}
    <div class="p-8 text-center text-gray-500" role="status" aria-live="polite">
        <p>No {{ view.model|model_name_plural }} found matching your criteria.</p>
        {% if applied_filters %}
        <p class="mt-2">
            <a href="{{ request.path }}"
               class="text-blue-600 hover:text-blue-500"
               hx-get="{{ request.path }}"
               hx-target="#results-container"
               hx-push-url="true">
                Clear all filters
            </a>
        </p>
        {% endif %}
    </div>
    {% endfor %}
</div>

{% if is_paginated %}
<div class="px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
    <div class="flex-1 flex justify-between sm:hidden">
        {% if page_obj.has_previous %}
        <a href="?page={{ page_obj.previous_page_number }}"
           class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
           hx-get="?page={{ page_obj.previous_page_number }}"
           hx-target="#results-container"
           hx-push-url="true">
            Previous
        </a>
        {% endif %}
        {% if page_obj.has_next %}
        <a href="?page={{ page_obj.next_page_number }}"
           class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
           hx-get="?page={{ page_obj.next_page_number }}"
           hx-target="#results-container"
           hx-push-url="true">
            Next
        </a>
        {% endif %}
    </div>
    <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
        <div>
            <p class="text-sm text-gray-700">
                Showing <span class="font-medium">{{ page_obj.start_index }}</span>
                to <span class="font-medium">{{ page_obj.end_index }}</span>
                of <span class="font-medium">{{ page_obj.paginator.count }}</span>
                results
            </p>
        </div>
        <div>
            <nav class="relative z-0 inline-flex rounded-md shadow-xs -space-x-px" aria-label="Pagination">
                {% if page_obj.has_previous %}
                <a href="?page={{ page_obj.previous_page_number }}"
                   class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
                   hx-get="?page={{ page_obj.previous_page_number }}"
                   hx-target="#results-container"
                   hx-push-url="true">
                    <span class="sr-only">Previous</span>
                    <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                        <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
                    </svg>
                </a>
                {% endif %}

                {% for i in page_obj.paginator.page_range %}
                {% if i == page_obj.number %}
                <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-blue-50 text-sm font-medium text-blue-600" aria-current="page">
                    {{ i }}
                </span>
                {% elif i > page_obj.number|add:"-3" and i < page_obj.number|add:"3" %}
                <a href="?page={{ i }}"
                   class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"
                   hx-get="?page={{ i }}"
                   hx-target="#results-container"
                   hx-push-url="true">
                    {{ i }}
                </a>
                {% endif %}
                {% endfor %}

                {% if page_obj.has_next %}
                <a href="?page={{ page_obj.next_page_number }}"
                   class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
                   hx-get="?page={{ page_obj.next_page_number }}"
                   hx-target="#results-container"
                   hx-push-url="true">
                    <span class="sr-only">Next</span>
                    <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                    </svg>
                </a>
                {% endif %}
            </nav>
        </div>
    </div>
</div>
{% endif %}
