{% macro onsPagination(params) %}
    {% from "components/icon/_macro.njk" import onsIcon %}
    {% set currentPageIndex = params.currentPageNumber|int %}
    {% set totalPages = params.pages | length|int %}
    {% set position = "Page " ~ currentPageIndex ~ " of " ~ totalPages %}
    {% set lastPage = params.pages | last %}
    {% set firstPage = params.pages | first %}
    {% set prevPageIndex = currentPageIndex - 1 %}
    {% set nextPageIndex = currentPageIndex + 1 %}
    {% set prevPageAriaLabel = (params.previousAriaLabel or 'Previous page') %}
    {% set nextPageAriaLabel = (params.nextAriaLabel or 'Next page') %}

    <nav
        class="ons-pagination{{ ' ' + params.classes if params.classes else '' }}{{ ' ons-pagination--no-indicator' if params.hideRangeIndicator }}"
        aria-label="{{ params.ariaLabel | default ('Pagination') }} ({{ position }})"
    >
        <div class="ons-pagination__position">{{ position }}</div>
        <ul class="ons-pagination__items{{ ' ons-pagination__items--no-previous' if currentPageIndex == 1 }}">
            {% if currentPageIndex != 1 %}
                {% set prevPageIndex = currentPageIndex - 2 %}
                <li class="ons-pagination__item ons-pagination__item--previous">
                    <a
                        href="{{ params.pages[prevPageIndex].url }}"
                        class="ons-pagination__link ons-pagination__link--no-underline"
                        rel="prev"
                        aria-label="{{ prevPageAriaLabel }} ({{ currentPageIndex - 1 }})"
                    >
                        {{-
                            onsIcon({
                                "iconType": 'arrow-previous',
                                "classes": 'ons-u-mr-2xs',
                                "iconSize": 'm'
                            })
                        -}}
                        <span class="ons-pagination__link-text">{{ params.previous | default("Previous") }}</span>
                    </a>
                </li>
            {% endif %}
            {% if currentPageIndex > 2 %}
                <li class="ons-pagination__item{{ ' ons-pagination__item--current' if currentPageIndex == 1 }}">
                    <a
                        href="{{ firstPage.url }}"
                        class="ons-pagination__link"
                        aria-label="{{ params.firstAriaLabel | default('First page') }}"
                        >1</a
                    >
                </li>
            {% endif %}
            {% if currentPageIndex > 4 %}
                <li class="ons-pagination__item ons-pagination__item--gap">&hellip;</li>
            {% endif %}
            {% for page in params.pages %}
                {% set showPage = false %}
                {# Show the current, next and previous page
                Show page 2 if the current page index is within the first 4 pages
                Show the penultimate page if the current page index is within the last 4 pages #}
                {% if (loop.index == currentPageIndex) or (loop.index == currentPageIndex + 1) or (loop.index == currentPageIndex - 1) or (loop.index == 2 and currentPageIndex <= 4) or ((loop.index == totalPages - 1) and (currentPageIndex > totalPages - 4)) %}
                    {% set showPage = true %}
                {% endif %}
                {% if showPage == true %}
                    <li class="ons-pagination__item{{ ' ons-pagination__item--current' if loop.index == currentPageIndex }}">
                        <a
                            href="{{ page.url }}"
                            class="ons-pagination__link"
                            {%- if loop.index == currentPageIndex -%}
                                aria-current="true"
                                aria-label="{% if params.currentAriaLabel %}{{ params.currentAriaLabel }} ({{ position }}){% else %}{{ position }}{% endif %}"
                            {%- else -%}
                                aria-label="{{ params.goToAriaLabel | default('Page') }} {{ loop.index }}"
                            {%- endif -%}
                            {%- if loop.index == currentPageIndex - 1 -%}
                                rel="prev"
                            {%- endif -%}
                            {%- if loop.index == currentPageIndex + 1 -%}
                                rel="next"
                            {%- endif -%}
                            >{{ loop.index }}</a
                        >
                    </li>
                {% endif %}
            {% endfor %}
            {% if currentPageIndex < totalPages - 3 %}
                <li class="ons-pagination__item ons-pagination__item--gap">&hellip;</li>
            {% endif %}
            {% if currentPageIndex < totalPages - 1 %}
                <li class="ons-pagination__item{{ ' ons-pagination__item--current' if currentPageIndex == totalPages }}">
                    <a
                        href="{{ lastPage.url }}"
                        class="ons-pagination__link"
                        aria-label="{{ params.lastAriaLabel | default('Last page') }} ({{ totalPages }})"
                        >{{ totalPages }}</a
                    >
                </li>
            {% endif %}
            {% if totalPages > 1 and totalPages != currentPageIndex %}
                <li class="ons-pagination__item ons-pagination__item--next">
                    <a
                        href="{{ params.pages[currentPageIndex].url }}"
                        class="ons-pagination__link ons-pagination__link--no-underline"
                        rel="next"
                        aria-label="{{ nextPageAriaLabel }} ({{ currentPageIndex + 1 }})"
                    >
                        <span class="ons-pagination__link-text">{{ params.next | default("Next") }}</span>
                        {{-
                            onsIcon({
                                "iconType": 'arrow-next',
                                "classes": 'ons-u-ml-2xs',
                                "iconSize": 'm'
                            })
                        -}}
                    </a>
                </li>
            {% endif %}
        </ul>
    </nav>
{% endmacro %}