<div class="d-flex justify-content-center mt-5">
    <nav aria-label="...">
        <ul class="pagination">
            {% if page_obj.has_previous %}
                <li class="page-item">
                    <a class="page-link" href="?{% if query_params %}{{ query_params }}{% endif %}&page={{ page_obj.previous_page_number }}">
                        Previous
                    </a>
                </li>
            {% else %}
                <li class="page-item disabled">
                    <a class="page-link" href="#">Previous</a>
                </li>
            {% endif %}
            
            {% for num in paginator.page_range %}

                {% if page_obj.number == num %}
                    <li class="page-item active" aria-current="page">
                        <a class="page-link" href="?{% if query_params %}{{ query_params }}{% endif %}&page={{ num }}">{{ num }}</a>
                    </li>
                {% else %}
                    <li class="page-item" aria-current="page">
                        <a class="page-link" href="?{% if query_params %}{{ query_params }}{% endif %}&page={{ num }}">{{ num }}</a>
                    </li>
                {% endif %}
            
            {% endfor %}

            {% if page_obj.has_next %}
                <li class="page-item">
                    <a class="page-link" href="?{% if query_params %}{{ query_params }}{% endif %}&page={{ page_obj.next_page_number }}">
                        Next
                    </a>
                </li>
            {% else %}
                <li class="page-item disabled">
                    <a class="page-link" href="#">Next</a>
                </li>
            {% endif %}

        </ul>
    </nav>
</div>