<ul class="pagination justify-content-end pt-4">
    {% if page_obj.has_previous %}
        <li>
            <a href="?{{ page_obj.previous_page_number.querystring }}"
               class="page-link"
               data-page="{{ page_obj.previous_page_number }}">
                <i class="fa fa-angle-left"></i>
            </a>
        </li>
    {% endif %}
    {% for page in page_obj.pages %}
        {% if page %}
            {% if page == page_obj.number %}
                <li class="page-item active">
                    <a class="page-link">{{ page }}</a>
                </li>
            {% else %}
                <li class="page-item">
                    <a href="?{{ page.querystring }}"
                       class="page-link"
                       data-page="{{ page }}">{{ page }}</a>
                </li>
            {% endif %}
        {% else %}
            <li class="page-item">
                <span class="page-link text-dark">...</span>
            </li>
        {% endif %}
    {% endfor %}
    {% if page_obj.has_next %}
        <li class="page-item">
            <a href="?{{ page_obj.next_page_number.querystring }}"
               class="page-link"
               data-page="{{ page_obj.next_page_number }}">
                <i class="fa fa-angle-right"></i>
            </a>
        </li>
    {% endif %}
</ul>
