{% if page_obj %}
<div class="row">
  <div class="col">
    <div class="card mt-3">
      <div class="card-body">
        <!-- Pagination -->
        <ul class="pagination justify-content-center mb-0">
          <li class="page-item {% if page_obj.has_previous %}{% else %}disabled{% endif %}">
            <a class="page-link" href="{% if page_obj.has_previous %}?{% if q %}q={{ q }}&{% endif %}page={{ page_obj.previous_page_number }}{% endif %}" aria-label="Previous">
              <span aria-hidden="true">&laquo;</span>
              <span class="sr-only">Previous</span>
            </a>
          </li>
        
          {% for l in page_obj.paginator.page_range %}
            {% if l <= page_obj.number|add:5 and l >= page_obj.number|add:-5 %}
                <li class="page-item {% if forloop.counter == page_obj.number %}active{% endif %}"><a class="page-link" href="?{% if q %}q={{ q }}&{% endif %}page={{ forloop.counter }}">{{ forloop.counter }}</a></li>
            {% endif %}
          {% endfor %}
          
          <li class="page-item {% if page_obj.has_next %}{% else %}disabled{% endif %}">
            <a class="page-link" href="{% if page_obj.has_next %}?{% if q %}q={{ q }}&{% endif %}page={{ page_obj.next_page_number }}{% endif %}" aria-label="Next">
              <span aria-hidden="true">&raquo;</span>
              <span class="sr-only">Next</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
{% endif %}