{% comment %}
  Renders a set of links for paginated results. Must be used within paginate tags.

  Accepts:
  - paginate: {Object}
  - anchor: {String} (optional) This can be added so that on page reload it takes you to wherever you've placed your anchor tag.

  Usage:
  {% paginate results by 2 %}
    {% render 'pagination', paginate: paginate, anchor: '#yourID' %}
  {% endpaginate %}
{% endcomment %}

{%- if paginate.parts.size > 0 -%}
  <nav class='xo-pagination' aria-label='{{ 'general.pagination.label' | t }}'>
    <ul role='list' class='xo-pagination__list'>
      {%- if paginate.previous -%}
        <li>
          <a
            href='{{ paginate.previous.url }}{{ anchor }}'
            aria-label='{{ 'general.pagination.previous' | t }}'
            class='xo-pagination__page xo-pagination__page--prev'
          >
            {% render 'icon', name: 'chevron-left' %}
          </a>
        </li>
      {%- endif -%}

      {%- for part in paginate.parts -%}
        <li>
          {%- if part.is_link -%}
            <a
              href='{{ part.url }}{{ anchor }}'
              aria-label='{{ 'general.pagination.page' | t: number: part.title }}'
              class='xo-pagination__page'
            >
              {{- part.title -}}
            </a>
          {%- else -%}
            {%- if part.title == paginate.current_page -%}
              <span
                class='xo-pagination__page xo-pagination__page--current'
                aria-current='page'
                aria-label='{{ 'general.pagination.page' | t: number: part.title }}'
              >
                {{- part.title -}}
              </span>
            {%- else -%}
              <span class='xo-pagination__page'>{{ part.title }}</span>
            {%- endif -%}
          {%- endif -%}
        </li>
      {%- endfor -%}

      {%- if paginate.next -%}
        <li>
          <a
            href='{{ paginate.next.url }}{{ anchor }}'
            aria-label='{{ 'general.pagination.next' | t }}'
            class='xo-pagination__page xo-pagination__page--next'
          >
            {%- render 'icon', name: 'chevron-right' -%}
          </a>
        </li>
      {%- endif -%}
    </ul>
  </nav>
{%- endif -%}
