<div class="pagination-centered">
  <ul class="pagination">
    {{#if canStepBackward}}
      <li class="arrow prev enabled-arrow">
        <a href="#" {{action "incrementPage" -1}}>&laquo;</a>
      </li>
    {{else}}
      <li class="arrow prev disabled">
        <a href="#" {{action "incrementPage" -1}}>&laquo;</a>
      </li>
    {{/if}}

    {{#each pageItems as |item|}}
      {{#if item.dots}}
        <li class="dots disabled">
          <span>...</span>
        </li>
      {{/if}}
      {{#if item.current}}
        <li class="active page-number">
          <a>{{item.page}}</a>
        </li>
      {{else}}
        <li class="page-number">
          <a href="#" {{action "pageClicked" item.page}}>{{item.page}}</a>
        </li>
      {{/if}}
    {{/each}}

    {{#if canStepForward}}
      <li class="arrow next enabled-arrow">
        <a href="#" {{action "incrementPage" 1}}>&raquo;</a>
      </li>
    {{else}}
      <li class="arrow next disabled">
        <a href="#" {{action "incrementPage" 1}}>&raquo;</a>
      </li>
    {{/if}}
  </ul>
</div>
