amp-home-theather-pagination.vue

<template>
  <div class="pagination">
    <amp-state id="rowsPerPage">
      <script type="application/json">
        {{ rowsPerPage }}
      </script>
    </amp-state>
    <amp-state id="totalItems">
      <script type="application/json">
        {{ totalItems }}
      </script>
    </amp-state>
    <amp-state id="currentPage">
      <script type="application/json">
        {{ currentPage }}
      </script>
    </amp-state>
    <amp-state id="totalPages">
      <script type="application/json">
        {{ totalPages }}
      </script>
    </amp-state>
    <amp-state id="startItem">
      <script type="application/json">
        {{ startItem }}
      </script>
    </amp-state>
    <amp-state id="endItem">
      <script type="application/json">
        {{ endItem }}
      </script>
    </amp-state>

    <div class="info">
      <span [text]="'Showing ' + startItem + ' - ' + endItem + ' out of ' + totalItems + ' movies'">
        Showing {{ startItem }} - {{ endItem }} out of {{ totalItems }} movies
      </span>
    </div>
    <div class="controls">
      <div
        class="button"
        :class="{ 'is-disabled': currentPage === 1 }"
        [class]="currentPage == 1 ? 'button is-disabled' : 'button'"
        on="tap:AMP.setState({ currentPage: currentPage - 1, startItem: startItem - rowsPerPage, endItem: endItem - rowsPerPage })"
        role="button"
        tabindex="5"
      >
        <fa-icon class="icon" :icon="['fas', 'chevron-left']" />
      </div>
      <div class="button">
        <div class="button-text" [text]="currentPage">
          {{ currentPage }}
        </div>
      </div>
      <div
        class="button"
        :class="{ 'is-disabled': currentPage === totalPages }"
        [class]="currentPage == totalPages ? 'button is-disabled' : 'button'"
        on="tap:AMP.setState({ currentPage: currentPage + 1 , startItem: startItem + rowsPerPage, endItem: totalItems < endItem + rowsPerPage ? totalItems : endItem + rowsPerPage })"
        role="button"
        tabindex="5"
      >
        <fa-icon class="icon" :icon="['fas', 'chevron-right']" />
      </div>
    </div>
  </div>
</template>