<div class="pt-3 d-flex justify-content-center sodar-pr-pagination">
  <ul class="pagination {% if pg_small %}pagination-sm{% endif %}">
    {% if page_obj.has_previous %}
      <li class="page-item">
        <a class="page-link" href="?page=1">
          <i class="iconify" data-icon="mdi:arrow-left-circle-outline"></i> First
        </a>
      </li>
      <li class="page-item">
        <a class="page-link" href="?page={{ page_obj.previous_page_number }}">
          <i class="iconify" data-icon="mdi:arrow-left-circle"></i> Prev
        </a>
      </li>
    {% else %}
      <li class="page-item disabled">
        <a class="page-link">
          <i class="iconify" data-icon="mdi:arrow-left-circle-outline"></i> First
        </a>
      </li>
      <li class="page-item disabled">
        <a class="page-link">
          <i class="iconify" data-icon="mdi:arrow-left-circle"></i> Prev
        </a>
      </li>
    {% endif %}
    {% if page_obj.number > 6 %}
      <li class="page-item disabled"><a class="page-link" >...</a></li>
    {% endif %}
    {% for i in paginator.page_range %}
      {% if i <= page_obj.number|add:5 and i >= page_obj.number|add:-5 %}
        {% if page_obj.number == i %}
          <li class="page-item active">
            <a class="page-link" >
              {{ i }} <span class="sr-only">(current)</span>
            </a>
          </li>
        {% else %}
          <li class="page-item">
            <a class="page-link" href="?page={{ i }}">{{ i }}</a>
          </li>
        {% endif %}
      {% endif %}
    {% endfor %}
    {% if page_obj.number < page_obj.paginator.num_pages|add:-5 %}
      <li class="page-item disabled"><a class="page-link" >...</a></li>
    {% endif %}
    {% if page_obj.has_next %}
      <li class="page-item">
        <a class="page-link" href="?page={{ page_obj.next_page_number }}">
          Next <i class="iconify" data-icon="mdi:arrow-right-circle"></i>
        </a>
      </li>
      <li class="page-item">
        <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}">
          Last <i class="iconify" data-icon="mdi:arrow-right-circle-outline"></i>
        </a>
      </li>
    {% else %}
      <li class="page-item disabled">
        <a class="page-link">
          Next <i class="iconify" data-icon="mdi:arrow-right-circle"></i>
        </a>
      </li>
      <li class="page-item disabled">
        <a class="page-link">
          Last <i class="iconify" data-icon="mdi:arrow-right-circle-outline"></i>
        </a>
      </li>
    {% endif %}
  </ul>
</div>
