{% apply spaceless %}
  {% if lastPage > 1 %}

    {# the number of first and last pages to be displayed #}
    {% set extremePagesLimit = 2 %}

    {# the number of pages that are displayed around the active page #}
    {% set nearbyPagesLimit = 1 %}

    {% if currentFilters is not defined %}{% set currentFilters = app.request.attributes.get('_route_params')|merge(app.request.query.all) %}{% endif %}
    {% if paginationPath is not defined %}{% set paginationPath = app.request.attributes.get('_route') %}{% endif %}
    {% if showAlwaysFirstAndLast is not defined %}{% set showAlwaysFirstAndLast = true %}{% endif %}

<tr>
  <td colspan="5">
    <div class="proscreen-pagination p-16px d-flex justify-content-between">
        {% if currentPage > 1 %}
          <div class="proscreen-pagination__left">
            <span class="proscreen-pagination__btn">
              <img src="{{ asset('images/admin/icons/icon-arrow-left.svg') }}" alt="ProScore Logo">
            </span>
            <span class="button-text js-pagination" data-path="{{ path(paginationPath, currentFilters|merge({page: currentPage-1})) }}">Previous</span>
          </div>
          <div class="proscreen-pagination__middle d-flex align-items-center justify-content-center gap-2">
            {% for i in range(1, extremePagesLimit) | filter(i => i < currentPage - nearbyPagesLimit ) %}
              <span class="proscreen-pagination__btn-text body-text-small fw-bold js-pagination" data-path="{{ path(paginationPath, currentFilters|merge({page: i})) }}">{{ i }}</span>
            {% endfor %}

            {% if extremePagesLimit + 1 < currentPage - nearbyPagesLimit %}
              <span class="body-text-small fw-bold">
                <img src="{{ asset('images/admin/icons/icon-triple-dot.svg') }}" alt="ProScore Logo">
              </span>
            {% endif %}

            {% for i in range(currentPage-nearbyPagesLimit, currentPage-1) | filter(i => i > 0 ) %}
              <span class="proscreen-pagination__btn-text body-text-small fw-bold js-pagination" data-path="{{ path(paginationPath, currentFilters|merge({page: i})) }}">{{ i }}</span>
            {% endfor %}

        {% elseif showAlwaysFirstAndLast %}
          <div class="proscreen-pagination__left">
            <span class="proscreen-pagination__btn disabled">
              <img src="{{ asset('images/admin/icons/icon-arrow-left.svg') }}" alt="ProScore Logo">
            </span>
            <span class="button-text">Previous</span>
          </div>
          <div class="proscreen-pagination__middle d-flex align-items-center justify-content-center gap-2">
        {% endif %}


        <span class="proscreen-pagination__btn-text body-text-small fw-bold active js-pagination" data-path="{{ path(paginationPath, currentFilters|merge({ page: currentPage })) }}">{{ currentPage }}</span>

        {% if currentPage < lastPage %}

          {% for i in range(currentPage+1, currentPage + nearbyPagesLimit) | filter(i => i <= lastPage) %}
            <span class="proscreen-pagination__btn-text body-text-small fw-bold js-pagination" data-path="{{ path(paginationPath, currentFilters|merge({page: i})) }}">{{ i }}</span>
          {% endfor %}

          {% if  (lastPage - extremePagesLimit) > (currentPage + nearbyPagesLimit) %}
            <span class="body-text-small fw-bold">
              <img src="{{ asset('images/admin/icons/icon-triple-dot.svg') }}" alt="ProScore Logo">
            </span>
          {% endif %}

          {% for i in range(lastPage - extremePagesLimit+1, lastPage) | filter( i => i > currentPage + nearbyPagesLimit ) %}
            <span class="proscreen-pagination__btn-text body-text-small fw-bold js-pagination" data-path="{{ path(paginationPath, currentFilters|merge({page: i})) }}">{{ i }}</span>
          {% endfor %}
      </div>
      <div class="proscreen-pagination__right">
        <span class="button-text">Next</span>
        <span class="proscreen-pagination__btn js-pagination" data-path="{{ path(paginationPath, currentFilters|merge({page: currentPage+1})) }}">
          <img src="{{ asset('images/admin/icons/icon-arrow-right.svg') }}" alt="ProScore Logo">
        </span>
      </div>
      {% elseif showAlwaysFirstAndLast %}
      </div>
          <div class="proscreen-pagination__right">
            <span class="button-text">Next</span>
            <span class="proscreen-pagination__btn disabled">
                <img src="{{ asset('images/admin/icons/icon-arrow-right.svg') }}" alt="ProScore Logo">
              </span>
          </div>
        {% endif %}
    </div>
  </td>
</tr>
  {% endif %}
{% endapply %}