<div class="sp-paginate">
  <ul class="pagination">
    {{#unless(hideFirst)}}
    <li class="{{#unless(hasPrevious)}}disabled{{/unless}} page-item">
      <a aria-label="First" on:click="gotoFirst()">
        <span aria-hidden="true">&laquo;&laquo;</span>
      </a>
    </li>
    {{/unless}}
    {{#unless(hidePrevious)}}
    <li class="{{#unless(hasPrevious)}}disabled{{/unless}} page-item">
      <a aria-label="Previous" on:click="gotoPrevious()">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    {{/unless}}
    {{#unless(hidePages)}}
    {{#for(page of visiblePages)}}
      <li class="{{#if(isActive(page))}}active{{/if}} page-item"><a on:click="gotoPage(page)">{{page}}</a></li>
    {{/for}}
    {{/unless}}
    {{#unless(hideNext)}}
    <li class="{{#unless(hasNext)}}disabled{{/unless}} page-item">
      <a aria-label="Next" on:click="gotoNext()">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
    {{/unless}}
    {{#unless(hideLast)}}
    <li class="{{#unless(hasNext)}}disabled{{/unless}} page-item">
      <a aria-label="Last" on:click="gotoLast()">
        <span aria-hidden="true">&raquo;&raquo;</span>
      </a>
    </li>
    {{/unless}}
  </ul>
</div>
