{% if total_pages > 1 %}
<div class="flex justify-center items-center mt-6 space-x-2">
  {% if current_page > 1 %}
  <a href="{{ url_for(request.endpoint, page=current_page - 1, per_page=per_page) }}" class="px-3 py-2 text-sm text-slate-600 bg-white border border-slate-300 rounded-md hover:bg-slate-50">
    Previous
  </a>
  {% else %}
  <span class="px-3 py-2 text-sm text-slate-400 bg-white border border-slate-300 rounded-md cursor-not-allowed">Previous</span>
  {% endif %}
  
  {% for page in range(1, total_pages + 1) %}
    {% if page == current_page %}
    <span class="px-3 py-2 text-sm font-medium text-white bg-blue-600 border border-blue-600 rounded-md">{{ page }}</span>
    {% elif page == 1 or page == total_pages or (page >= current_page - 2 and page <= current_page + 2) %}
    <a href="{{ url_for(request.endpoint, page=page, per_page=per_page) }}" class="px-3 py-2 text-sm text-slate-600 bg-white border border-slate-300 rounded-md hover:bg-slate-50">
      {{ page }}
    </a>
    {% elif page == current_page - 3 or page == current_page + 3 %}
    <span class="px-3 py-2 text-sm text-slate-400">...</span>
    {% endif %}
  {% endfor %}
  
  {% if current_page < total_pages %}
  <a href="{{ url_for(request.endpoint, page=current_page + 1, per_page=per_page) }}" class="px-3 py-2 text-sm text-slate-600 bg-white border border-slate-300 rounded-md hover:bg-slate-50">
    Next
  </a>
  {% else %}
  <span class="px-3 py-2 text-sm text-slate-400 bg-white border border-slate-300 rounded-md cursor-not-allowed">Next</span>
  {% endif %}
</div>
{% endif %}