{% load smart_pagination %}
{% if is_paginated %}
    <div class="row mt-3">
        <div class="col">
            <ul class="pagination">
                {% if page_obj.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="{% querystring request page=page_obj.previous_page_number %}"
                           aria-label="Previous">
                            <i class="fa fa-chevron-left" aria-hidden="true"></i>
                        </a>
                    </li>
                {% else %}
                    <li class="page-item disabled">
                        <a class="page-link" href="#">
                            <i class="fa fa-chevron-left"></i>
                        </a>
                    </li>
                {% endif %}
                {% for page in paginator.page_range|smart_pages:page_obj.number %}
                    {% if page_obj.number == page %}
                        <li class="active">
                            <span class="page-link">{{ page }}</span>
                        </li>
                    {% else %}
                        <li class="page-item">
                            <a class="page-link" href="{% querystring request page=page %}">
                                {{ page }}
                            </a>
                        </li>
                    {% endif %}
                {% endfor %}
                {% if page_obj.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="{% querystring request page=page_obj.next_page_number %}"
                           aria-label="Next">
                            <i class="fa fa-chevron-right" aria-hidden="true"></i>
                        </a>
                    </li>
                {% else %}
                    <li class="page-item disabled">
                        <a class="page-link" href="#">
                            <i class="fa fa-chevron-right"></i>
                        </a>
                    </li>
                {% endif %}
            </ul>
        </div>
    </div>
{% endif %}
