{% load i18n %}

{% 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 no-right-margin"></i>
                                <span class="sr-only">{% trans "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 no-right-margin" 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 no-right-margin"></i>
                                <span class="sr-only">{% trans "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 no-right-margin" aria-hidden="true"></i>
                            </a>
                        </li>
                    {% endif %}
                    {% for page_number in pagination_page_navigation_range %}
                        {% if page_obj.number == page_number %}
                            <li class="page-item active">
                                 <span class="page-link">
                                     <strong>{{ page_number }}</strong>
                                 </span>
                            </li>
                        {% elif page_number > 0 and page_number <= page_obj.paginator.num_pages %}
                            <li class="page-item">
                                 <a href="#" class="page-link" onclick="goto_page({{ page_number }})" aria-label="Page {{ page_number }}">
                                     {{ page_number }}
                                 </a>
                            </li>
                        {% endif %}
                    {% endfor %}
                        <li class="page-item page-of">
                            <span class="page-link">
                                {% trans 'Page' %}
                                <label for="page_number_text" hidden></label>
                                <input type="text" id="page_number_text" pattern="\d+" value="{{ page_obj.number }}" class="form-control"/>
                                &#47; {{ 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 no-right-margin"></i>
                                <span class="sr-only">{% trans "Next" %}</span>
                            </a>
                        </li>
                    {% else %}
                        <li class="page-item disabled">
                            <a href="#" class="page-link" aria-label="Next">
                                <i class="fas fa-angle-right no-right-margin" 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 no-right-margin"></i>
                                <span class="sr-only">{% trans "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 no-right-margin" aria-hidden="true" tabindex="-1"></i>
                            </a>
                        </li>
                    {% endif %}
                </ul>
            </nav>
        </div>
    </div>
{% else %}
    <input type="hidden" id="page_number_text" value="" />
{% endif %}