{% if page_obj %}
{% with query=request.GET.urlencode %}
<nav class="flex items-center justify-between px-4 py-3 bg-white border-t border-gray-200">
  <div class="text-sm text-gray-600">
    Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
  </div>
  <div class="flex items-center gap-2">
    {% if page_obj.has_previous %}
      <a class="btn-outline" href="?{% if query %}{{ query }}&{% endif %}page=1">First</a>
      <a class="btn-outline" href="?{% if query %}{{ query }}&{% endif %}page={{ page_obj.previous_page_number }}">Prev</a>
    {% else %}
      <span class="btn-outline opacity-50 cursor-not-allowed">First</span>
      <span class="btn-outline opacity-50 cursor-not-allowed">Prev</span>
    {% endif %}
    {% if page_obj.has_next %}
      <a class="btn-outline" href="?{% if query %}{{ query }}&{% endif %}page={{ page_obj.next_page_number }}">Next</a>
      <a class="btn-outline" href="?{% if query %}{{ query }}&{% endif %}page={{ page_obj.paginator.num_pages }}">Last</a>
    {% else %}
      <span class="btn-outline opacity-50 cursor-not-allowed">Next</span>
      <span class="btn-outline opacity-50 cursor-not-allowed">Last</span>
    {% endif %}
  </div>
</nav>
{% endwith %}
{% endif %}
