{% if posts.pagination.pages is not empty %}
  {% set current = posts.pagination.current %}
  {% set total = posts.pagination.total %}

  <div class="pagination">
    {# previous #}
    <a href="{{posts.pagination.prev.link}}" class="pagination__arrow {{ (current == 1) ? "disabled"}}">
      <svg class="icon-arrow-left-small">
        <use xlink:href="{{site.theme.link}}/frontend/icons/icons.svg#icon-arrow-left-small"></use>
      </svg>
      <span class="pagination__arrow-text pagination__arrow-text--prev">prethodna</span>
    </a>
    
    {# if current page is less than 3 show first 5 pages #}
    {% if current <= 3 %} 
      {% for page in posts.pagination.pages %}
          {% if page.title <= 5 %}
            <a href="{{page.link}}" class="pagination__page {{ page.link ?: "active"}}"><span>{{page.title}}</span></a>
          {% endif %}
      {% endfor %}

    {# if current page is in last 3 show last 5 pages #}
    {% elseif current >= (total - 2) %}
      {% for page in posts.pagination.pages %}
          {% if page.title >= (total - 4) %}
            <a href="{{page.link}}" class="pagination__page {{ page.link ?: "active"}}"><span>{{page.title}}</span></a>
          {% endif %}
      {% endfor %}

    {# else show two pages before and two after the current page   #}
    {% else  %}  
      {% for page in posts.pagination.pages %}
          {% if (page.title >= (current - 2)) and (page.title <=  ( current + 2 ))%}
            <a href="{{page.link}}" class="pagination__page {{ page.link ?: "active"}}"><span>{{page.title}}</span></a>
          {% endif %}
      {% endfor %}
    {% endif %}    
    {# next #}
    <a href="{{posts.pagination.next.link}}" class="pagination__arrow {{ (current == total) ? "disabled"}}">
      <span class="pagination__arrow-text pagination__arrow-text--next">sljedeća</span>
      <svg class="icon-arrow-right-small">
        <use xlink:href="{{site.theme.link}}/frontend/icons/icons.svg#icon-arrow-right-small"></use>
      </svg>
    </a>
  </div>
{% endif %}