{% macro render_pagination(pagination, endpoint, **kwargs) %}
<div class="flex justify-center">
    <nav class="inline-flex rounded-md shadow">
        {% if pagination.has_prev %}
        <a href="{{ url_for(endpoint, page=pagination.prev_num, **kwargs) }}" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-l-md hover:bg-gray-50">
            Previous
        </a>
        {% else %}
        <span class="px-4 py-2 text-sm font-medium text-gray-400 bg-gray-100 border border-gray-300 rounded-l-md cursor-not-allowed">
            Previous
        </span>
        {% endif %}
        
        {% for page_num in pagination.iter_pages(left_edge=1, right_edge=1, left_current=2, right_current=2) %}
            {% if page_num %}
                {% if page_num == pagination.page %}
                <span class="px-4 py-2 text-sm font-medium text-blue-600 bg-blue-50 border border-gray-300">
                    {{ page_num }}
                </span>
                {% else %}
                <a href="{{ url_for(endpoint, page=page_num, **kwargs) }}" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 hover:bg-gray-50">
                    {{ page_num }}
                </a>
                {% endif %}
            {% else %}
            <span class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300">
                …
            </span>
            {% endif %}
        {% endfor %}
        
        {% if pagination.has_next %}
        <a href="{{ url_for(endpoint, page=pagination.next_num, **kwargs) }}" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-r-md hover:bg-gray-50">
            Next
        </a>
        {% else %}
        <span class="px-4 py-2 text-sm font-medium text-gray-400 bg-gray-100 border border-gray-300 rounded-r-md cursor-not-allowed">
            Next
        </span>
        {% endif %}
    </nav>
</div>
{% endmacro %}