Pager: First page

<nav class="pager" role="navigation" aria-labelledby="pagination-heading">
  <h2 id="pagination-heading" class="visually-hidden">Pagination</h2>
  <ul class="pager__items js-pager__items d-flex list-inline justify-content-center align-items-stretch">
    {% if min != 1 %}
    <li class="pager__item list-inline-item pager__item--previous">
      <a class="text-decoration-none d-flex px-1 justify-content-center align-items-center rounded-circle" href="#" title="Go to previous page" rel="prev">
        <span class="visually-hidden">Previous page</span>
        <span aria-hidden="true">
          <svg class="flipped">
            <use xlink:href="#arrow"></use>
          </svg>
        </span>
      </a>
    </li>
    <li class="pager__item list-inline-item pager__item--first">
      <a class="text-decoration-none d-flex px-1 justify-content-center align-items-center rounded-circle" href="#" title="Go to first page" rel="first">
        <span class="visually-hidden">Page
        </span>1
      </a>
    </li>
    <li class="pager__item list-inline-item pager__item--ellipsis px-1" role="presentation">
      <span aria-hidden="true">
        <svg>
          <use xlink:href="#ellipsis"></use>
        </svg>
      </span>
    </li>
    {% endif %}
    {% for index in range(min, max) %}
    <li class="pager__item list-inline-item{{ (current == index) ? " is-active" : "" }}">
      <a class="text-decoration-none d-flex p-2 justify-content-center align-items-center{{ (current == index) ? " bg-primary" : "" }} rounded-circle" href="#" title="Go to page {{ index }}">
        <span class="visually-hidden">
          Page
        </span>{{ index }}</a>
    </li>
    {% endfor %}
    {% if max != current %}
    <li class="pager__item list-inline-item pager__item--ellipsis px-1" role="presentation">
      <span aria-hidden="true">
        <svg>
          <use xlink:href="#ellipsis"></use>
        </svg>
      </span>
    </li>
    <li class="pager__item list-inline-item pager__item--last">
      <a class="text-decoration-none d-flex px-1 justify-content-center align-items-center rounded-circle" href="#" title="Go to last page" rel="last">
        <span class="visually-hidden">Page
        </span>{{ last }}
      </a>
    </li>
    <li class="pager__item list-inline-item pager__item--next">
      <a class="text-decoration-none d-flex px-1 justify-content-center align-items-center rounded-circle" href="#" title="Go to next page" rel="next">
        <span class="visually-hidden">Next page</span>
        <span aria-hidden="true">
          <svg>
            <use xlink:href="#arrow"></use>
          </svg>
        </span>
      </a>
    </li>
    {% endif %}
  </ul>
</nav>