<div class="is-flex-between is-flex-center" ...attributes>
  <div class="is-fullwidth is-flex-center">
    <p class="has-text-grey has-left-margin-l" data-test-page-display-info>
      {{this.displayInfo}}
    </p>
  </div>
  <div class="is-fullwidth is-flex-v-centered">
    <button
      type="button"
      class="button is-flat has-short-padding"
      disabled={{eq this.page 1}}
      data-test-previous-page
      {{on "click" (fn this.changePage (sub this.page 1))}}
    >
      <Icon @name="chevron-left" />
      Previous
    </button>
    {{#each this.pages as |page|}}
      <button
        type="button"
        class="button is-flat has-left-margin-xxs {{if (eq this.page page) 'is-primary is-underlined is-active'}}"
        data-test-page={{page}}
        {{on "click" (fn this.changePage page)}}
      >
        {{page}}
      </button>
    {{/each}}
    {{#if this.hasMorePages}}
      <span class="has-text-grey has-left-margin-m" data-test-more-pages>...</span>
    {{/if}}
    <button
      type="button"
      class="button is-flat has-short-padding has-left-margin-l"
      disabled={{eq this.page this.totalPages}}
      data-test-next-page
      {{on "click" (fn this.changePage (add this.page 1))}}
    >
      Next
      <Icon @name="chevron-right" />
    </button>
  </div>
  {{! intentionally empty to place buttons in the middle }}
  <div class="is-fullwidth"></div>
</div>