{% load bootstrap4 %}

{% if is_paginated %}
    <div class="row">
        <div class="col-12">
            <nav aria-label="{{ page_obj.name }} Pagination">
                <ul class="pagination">
                    {% if page_obj.number != 1 %}
                        <li class="page-item">
                            <a href="#" class="page-link" onclick="goto_page(1)" aria-label="First">
                                <i class="fas fa-angle-double-left"></i>
                                <span class="sr-only">First</span>
                            </a>
                        </li>
                    {% else %}
                        <li class="page-item disabled">
                            <a href="#" class="page-link" aria-label="First" tabindex="-1">
                                <i class="fas fa-angle-double-left" aria-hidden="true"></i>
                            </a>
                        </li>
                    {% endif %}
                    {% if page_obj.has_previous %}
                        <li class="page-item">
                            <a href="#" class="page-link" onclick="goto_page({{ page_obj.previous_page_number }})" aria-label="Previous">
                                <i class="fas fa-angle-left"></i>
                                <span class="sr-only">Previous</span>
                            </a>
                        </li>
                    {% else %}
                        <li class="page-item disabled">
                            <a href="#" class="page-link" aria-label="Previous" tabindex="-1">
                                <i class="fas fa-angle-left" aria-hidden="true"></i>
                            </a>
                        </li>
                    {% endif %}
                    {% for page in page_obj.paginator.page_range %}
                        {% if page_obj.number == page %}
                            <li class="page-item active">
                                 <span class="page-link">
                                     {{ page }}
                                 </span>
                            </li>
                        {% elif page > page_obj.number|add:"-4" and page < page_obj.number|add:"4" %}
                            <li class="page-item">
                                 <a href="#" class="page-link" onclick="goto_page({{ page }})" aria-label="Page {{ page }}">
                                     {{ page }}
                                 </a>
                            </li>
                        {% endif %}
                    {% endfor %}
                    <li class="page-item page-of">
                        <span class="page-link">
                            Page
                            <label for="page_number_text" hidden></label>
                            <input type="text" id="page_number_text" pattern="\d+" value="{{ page_obj.number }}" class="form-control"/>
                            of {{ page_obj.paginator.num_pages }}
                        </span>
                    </li>
                    {% if page_obj.has_next %}
                        <li class="page-item">
                            <a href="#" class="page-link" onclick="goto_page({{ page_obj.next_page_number }})" aria-label="Next">
                                <i class="fas fa-angle-right"></i>
                                <span class="sr-only">Next</span>
                            </a>
                        </li>
                    {% else %}
                        <li class="page-item disabled">
                            <a href="#" class="page-link" aria-label="Next">
                                <i class="fas fa-angle-right" aria-hidden="true" tabindex="-1"></i>
                            </a>
                        </li>
                    {% endif %}
                    {% if page_obj.number != page_obj.paginator.num_pages %}
                        <li class="page-item">
                            <a href="#" class="page-link" onclick="goto_page({{ page_obj.paginator.num_pages }})" aria-label="Last">
                                <i class="fas fa-angle-double-right"></i>
                                <span class="sr-only">Last</span>
                            </a>
                        </li>
                    {% else %}
                        <li class="page-item disabled">
                            <a href="#" class="page-link" aria-label="Last">
                                <i class="fas fa-angle-double-right" aria-hidden="true" tabindex="-1"></i>
                            </a>
                        </li>
                    {% endif %}
                </ul>
            </nav>
        </div>
    </div>
{% else %}
    <input type="hidden" id="page_number_text" value="" />
{% endif %}