{% load dash_extras %}
{% if is_paginated %}
  <nav class="mt-6 flex flex-wrap items-center justify-center gap-2" aria-label="Halaman">
    {% if page_obj.has_previous %}
      <a href="{% query_replace page=page_obj.previous_page_number %}" class="chip !px-4 !py-2">←</a>
    {% endif %}
    {% for num in paginator.page_range %}
      {% if num == page_obj.number %}
        <span class="chip chip-active !px-4 !py-2">{{ num }}</span>
      {% elif num > page_obj.number|add:"-3" and num < page_obj.number|add:"3" %}
        <a href="{% query_replace page=num %}" class="chip !px-4 !py-2">{{ num }}</a>
      {% endif %}
    {% endfor %}
    {% if page_obj.has_next %}
      <a href="{% query_replace page=page_obj.next_page_number %}" class="chip !px-4 !py-2">→</a>
    {% endif %}
  </nav>
{% endif %}