{% if page_obj %}
<div class="container main-content mt-2" id="pagination">
  <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>
</div>
{% endif %}