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

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

    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.
{% endcomment %}

<link rel="stylesheet" href="{{ 'component-pagination.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'wick--component-pagination.css' | asset_url }}" media="print" onload="this.media='all'">
<noscript>{{ 'component-pagination.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'wick--component-pagination.css' | asset_url | stylesheet_tag }}</noscript>

{%- if paginate.parts.size > 0 -%}
{% comment %}
  <div class="pagination-wrapper">
    <nav class="pagination" role="navigation" aria-label="{{ 'general.pagination.label' | t }}">
      <ul class="pagination__list list-unstyled" role="list">
      {%- if paginate.previous -%}
        <li>
          <a href="{{ paginate.previous.url }}{{ anchor }}" class="pagination__item pagination__item--next pagination__item-arrow link motion-reduce" aria-label="{{ 'general.pagination.previous' | t }}">
            {% render 'icon-caret' %}
          </a>
        </li>
      {%- endif -%}

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

      {%- if paginate.next -%}
        <li>
          <a href="{{ paginate.next.url }}{{ anchor }}" class="pagination__item pagination__item--prev pagination__item-arrow link motion-reduce" aria-label="{{ 'general.pagination.next' | t }}" >
            {%- render 'icon-caret' -%}
          </a>
        </li>
      {%- endif -%}
      </ul>
    </nav>
  </div>
  {% endcomment %}


  <div class="pagination-wrapper">
    <nav class="pagination" role="navigation" aria-label="{{ 'general.pagination.label' | t }}">
      {% if paginate.next %}
        <div id="AjaxinatePagination" class="no-js-hidden{% if paginate.current_page == 1 %} pagination__first-page{% endif %}">
          <a href="{{ paginate.next.url }}" class="button">{{ 'general.pagination.load_more' | t }}</a>
        </div>
      {% endif %}

      <ul class="pagination__list list-unstyled no-js" role="list">
        <li>
          <a href="{{ paginate.previous.url }}{{ anchor }}" class="pagination__item pagination__item--next pagination__item-arrow link motion-reduce button{% unless paginate.previous %} disabled{% endunless %}" aria-label="{{ 'general.pagination.previous' | t }}">
            {{ 'general.pagination.previous' | t }}
          </a>
        </li>

        <li>
          <a href="{{ paginate.next.url }}{{ anchor }}" class="pagination__item pagination__item--prev pagination__item-arrow link motion-reduce button{% unless paginate.next %} disabled{% endunless %}" aria-label="{{ 'general.pagination.next' | t }}" >
            {{ 'general.pagination.next' | t }}
          </a>
        </li>
      </ul>
    </nav>
  </div>

{%- endif -%}