{% load static %}
<style>

.blog .blog-pagination {
  color: #878787;
}
.blog .blog-pagination ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
}
.blog .blog-pagination li {
  margin: 0 5px;
  transition: 0.3s;
}
.blog .blog-pagination li a {
  color: #545454;
  padding: 7px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blog .blog-pagination li.active, .blog .blog-pagination li:hover {
  background: #1c497d;
  color:#fff;
}
.blog .blog-pagination li.active {
  background: #1c497d;
  color:#fff;
  padding: 7px 16px;
}
.blog .blog-pagination li.active a, .blog .blog-pagination li:hover a {
  color: #fff;
}
</style>

<div class="blog-pagination">
    <ul class="justify-content-center">

        {% if page_obj.has_previous %}
            <li><a href="?page={{ page_obj.previous_page_number }}"> << </a></li>
        {% else %}

        {% endif %}

        {% if page_obj.number|add:'-2' > 1 %}
            <li><a href="?page={{ page_obj.number|add:'-3' }}">&hellip;</a></li>
        {% endif %}

        {% for i in page_obj.paginator.page_range %}
            {% if page_obj.number == i %}
                <li class="active"><span>{{ i }}</span></li>
            {% elif i > page_obj.number|add:'-3' and i < page_obj.number|add:'3' %}
                <li><a href="?page={{ i }}">{{ i }}</a></li>
            {% endif %}
        {% endfor %}

        {% if page_obj.paginator.num_pages > page_obj.number|add:'2' %}
            <li><a href="?page={{ page_obj.number|add:'3' }}">&hellip;</a></li>
        {% endif %}

        {% if page_obj.has_next %}
            <li><a href="?page={{ page_obj.next_page_number }}"> >> </a></li>
        {% else %}

        {% endif %}

  </ul>
</div>
