<nav id="pagination-nav" aria-label="Page navigation" class="mt-3 mb-5">
    <ul class="pagination justify-content-center pagination-sm">
        {% if comments.has_previous %}
            <li class="{{li_cls}}">
                <a class="page-link {{text_style}}" href="?page=1#comments">first</a>
            </li>
            <li class="{{li_cls}}">
                <a class="page-link {{text_style}}" href="?page={{ comments.previous_page_number }}#comments" aria-label="Previous">
                    &laquo;
                </a>
            </li>
        {% else %}
            <li class="{{li_cls}} disabled">
                <a class="page-link">first</a>
            </li>
            <li class="{{li_cls}} disabled">
                <a class="page-link" aria-label="Previous"> &laquo; </a>
            </li>
        {% endif %}
        {% if comments.number > 3 %}
            <li class="{{li_cls}}">
                <a class="page-link {{text_style}}" href="?page=1#comments">...</a>
            </li>
        {% endif %}

        {% for page in comments.paginator.page_range %}
            {% if comments.number == page %}
                <li class="{{li_cls}} active">
                    <a class="page-link {{active_btn}}">{{ page }}</a>
                </li>
            {% elif comments.number >= page|add:"-2" and comments.number <= page|add:"2" %}
                <li class="{{li_cls}}">
                    <a class="page-link {{text_style}}" href="?page={{ page }}#comments">{{ page }}</a>
                </li>
            {% endif %}
        {% endfor %}

        {% if comments.number < comments.paginator.num_pages|add:"-2" %}
            <li class="{{li_cls}}">
                <a class="page-link {{text_style}}" href="?page={{ comments.paginator.num_pages }}#comments">...</a>
            </li>
        {% endif %}

        {% if comments.has_next %}
            <li class="{{li_cls}}">
                <a class="page-link {{text_style}}" href="?page={{ comments.next_page_number }}#comments" aria-label="Next">
                    &raquo;
                </a>
            </li class="{{li_cls}}">
            <li>
                <a class="page-link {{text_style}}" href="?page={{ comments.paginator.num_pages }}#comments">last </a>
            </li>
        {% else %}
            <li class="{{li_cls}} disabled">
                <a class="page-link" aria-label="Next">&raquo;</a>
            </li>
            <li class="{{li_cls}} disabled">
                <a class="page-link">last </a>
            </li>
        {% endif %}
    </ul>
</nav>
