<!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
{% block sw_pagination %}
<div
    v-if="shouldBeVisible"
    class="sw-pagination"
>
    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_pagination_page_prev %}
    <button
        :disabled="currentPage === 1"
        :aria-label="$tc('global.sw-pagination.previousPage')"
        class="sw-pagination__page-button sw-pagination__page-button-prev"
        @click="prevPage"
    >
        <sw-icon
            name="regular-chevron-left-xs"
        />
    </button>
    {% endblock %}

    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_pagination_page_list %}
    <ul class="sw-pagination__list">
        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_pagination_page_list_item %}
        <li
            v-for="(pageNum, index) in displayedPages"
            :key="index"
            class="sw-pagination__list-item"
        >
            <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
            {% block sw_pagination_page_list_item_button %}
            <button
                v-if="typeof(pageNum) === 'number'"
                :aria-label="$tc('global.sw-pagination.page', { page: pageNum })"
                class="sw-pagination__list-button"
                :class="{ 'is-active': currentPage === pageNum }"
                @click="changePageByPageNumber(pageNum)"
            >
                {{ pageNum }}
            </button>
            {% endblock %}

            <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
            {% block sw_pagination_page_list_item_separator %}
            <span
                v-else
                class="sw-pagination__list-separator"
            >
                {{ pageNum }}
            </span>
            {% endblock %}
        </li>
        {% endblock %}
    </ul>
    {% endblock %}

    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_pagination_page_next %}
    <button
        :disabled="currentPage === maxPage"
        :aria-label="$tc('global.sw-pagination.nextPage')"
        class="sw-pagination__page-button sw-pagination__page-button-next"
        @click="nextPage"
    >
        <sw-icon
            name="regular-chevron-right-xs"
            small
        />
    </button>
    {% endblock %}

    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_pagination_per_page_selection %}
    <div
        v-if="steps.length > 1"
        class="sw-pagination__per-page"
    >
        <sw-select-field
            size="small"
            name="perPage"
            :label="$tc('global.sw-pagination.labelItemsPerPage')"
            :value="String(perPage)"
            aside
            @update:value="onPageSizeChange"
        >
            <option
                v-for="step in possibleSteps"
                :key="step"
                :value="step"
            >
                {{ step }}
            </option>
        </sw-select-field>
    </div>
    {% endblock %}
</div>
{% endblock %}
