pagination.amp.html

<!--
  Pagination for product listing

  Expects array of objects from endpoint:
{
  "items": {
    "pages": [{
      "value": 1,
      "text": "1",
      "selected": true
    },{
      "value": 2,
      "text": "2",
      "selected": true
    },{
      "value": 3,
      "text": "3",
      "selected": true
    },{
      "value": 4,
      "text": "4",
      "selected": true
    },{
      "value": 5,
      "text": "5",
      "selected": true
    }]
  }
}
-->

<amp-list
  layout="flex-item"
  src="/filters.json.php"
  height="40"
  [src]="'/filters.json.php?<?=$initial?>">
  <template type="amp-mustache">
    <button class="border cursor-pointer p-1"
      [disabled]="filtering.current_page == 1"
      on="tap:AMP.pushState({
        filtering: { current_page: filtering.current_page - 1 },
        product_list: { items: { loading: true } }
      })">&larr;</button>

    {{#pages}}
      <button class="border cursor-pointer p-1 {{#selected}}bg-black text-white{{/selected}}"
        on="tap:AMP.pushState({
          filtering: { current_page: {{value}} },
          product_list: { items: { loading: true } }
        })">
        {{text}}
      </button>
    {{/pages}}

    <button class="border p-1"
      [disabled]="filtering.current_page == {{total_pages}}"
      on="tap:AMP.pushState({
        filtering: { current_page: filtering.current_page + 1 },
        product_list: { items: { loading: true } }
      })">&rarr;</button>
  </template>
</amp-list>