{% trans_default_domain 'sections' %}
<div data-filter-pager {{ attributes.defaults(stimulus_controller('filter-replace', {
   responseKey: 'pagerHtml',
   emit: 'wpj.js-filters.pager-update',
   emitTarget: "[data-component=\"#{this.shortName}\"]",
   emitPayload: {updatePage: true},
})) }}>
   {% if this.pager.count > 1 %}
      <div>
         {% if this.show_scroll_top_button %}
            <button type="button" class="btn {{ this.button_top_class }} btn-scroll-top" data-scroll-top>{{ 'pager.up'|trans }}
               <twig:ux:icon name="caret-up" class="c-icon"/>
            </button>
         {% endif %}
      </div>
      {% if this.show_load_more_button and this.pager.number < this.pager.count %}
         <button class="btn btn-loader" data-filter-loader="{{ this.pager.number + 1 }}">
            <twig:Spinner/>
            {{ 'pager.load.more'|trans }}
         </button>
      {% endif %}
      <div>
         <ul class="pagination">
            <li>
               {% set prev_page = this.pager.number - 1 %}
               <a href="?page={{ prev_page }}" class="btn btn-pager btn-pager-prev{% if this.pager.number == 1 %} disabled{% endif %}"
                  data-filter-page="{{ prev_page }}" data-prefetch
                  aria-label="{{ 'pager.goto.prev'|trans }}"
                  title="{{ 'pager.goto.prev'|trans }}"
                     {% if this.pager.number == 1 %} aria-disabled="true"{% endif %}>
                  <twig:ux:icon name="caret-left" class="c-icon"/>
               </a>
            </li>

            {% if this.pager.first %}
               {% for page in 1..this.pager.pageSideCount %}
                  <li{% if this.pager.number == page %} class="active"{% endif %}>
                     <a href="?page={{ page }}" data-filter-page="{{ page }}"
                        aria-label="{{ 'pager.goto'|trans }} {{ page }}"
                        title="{{ 'pager.goto'|trans }} {{ page }}">{{ page }}</a>
                  </li>
               {% endfor %}
               {% if this.pager.firstDots %}
                  <li>&hellip;</li>
               {% endif %}
            {% endif %}

            {% for page in this.pager.number - this.pager.pageInsideCount..this.pager.number + this.pager.pageInsideCount %}
               {% if page > 0 and page <= this.pager.count %}
                  <li{% if this.pager.number == page %} class="active"{% endif %}>
                     <a href="?page={{ page }}" data-filter-page="{{ page }}"
                        aria-label="{{ 'pager.goto'|trans }} {{ page }}"
                        title="{{ 'pager.goto'|trans }} {{ page }}">{{ page }}</a>
                  </li>
               {% endif %}
            {% endfor %}

            {% if this.pager.last %}
               {% if this.pager.lastDots %}
                  <li>&hellip;</li>
               {% endif %}
               {% for page in this.pager.count - this.pager.pageSideCount + 1..this.pager.count %}
                  <li><a href="?page={{ page }}" data-filter-page="{{ page }}"
                         aria-label="{{ 'pager.goto'|trans }} {{ page }}"
                         title="{{ 'pager.goto'|trans }} {{ page }}">{{ page }}</a></li>
               {% endfor %}
            {% endif %}

            <li>
               {% set next_page = this.pager.number + 1 %}
               <a href="?page={{ next_page }}"
                  class="btn btn-pager btn-pager-next{% if this.pager.number == this.pager.count %} disabled{% endif %}"
                  data-filter-page="{{ next_page }}" data-prefetch
                  aria-label="{{ 'pager.goto.next'|trans }}"
                  title="{{ 'pager.goto.next'|trans }}"
                     {% if this.pager.number == this.pager.count %} aria-disabled="true"{% endif %}>
                  <twig:ux:icon name="caret-right" class="c-icon"/>
               </a>
            </li>
         </ul>
      </div>
   {% endif %}
</div>
