<bmx-pagination>

<div class="row">
  <p style="margin: 0">
    Page through 813 records. Watch the width of the control as you go: it does not change, so the button under your
    pointer stays where it was.
  </p>
</div>

<div class="row">
  <bmx-pagination
    id="ex-pagination"
    total-items="813"
    page-size="20"
    page="1"
    show-edges
    show-summary
    page-sizes="10,20,50,100"
  ></bmx-pagination>
</div>

<div class="row">
  <span class="note" id="ex-pagination-out">Showing rows 1–20 of 813.</span>
</div>

<div class="row" style="margin-block-start: 1rem">
  <p style="margin: 0">The same control on a narrow screen, where a row of numbers has nowhere to go:</p>
</div>

<div class="row">
  <bmx-pagination total-items="813" page-size="20" page="7" compact show-edges></bmx-pagination>
</div>

<script type="module">
  await customElements.whenDefined('bmx-pagination');

  const out = document.getElementById('ex-pagination-out');

  /*
   * The event carries the row numbers as well as the page, because that is what
   * a query needs - `OFFSET 40 LIMIT 20` rather than "page 3". The component
   * fetches nothing itself: what a page *is* belongs to the data layer, which
   * knows about the API and the cache and this component never will.
   */
  document.getElementById('ex-pagination').addEventListener('bmxChange', event => {
    const { page, firstItem, lastItem, pageSize, reason } = event.detail;

    out.textContent =
      reason === 'size'
        ? `Now ${pageSize} per page — rows ${firstItem}–${lastItem}, on page ${page}.`
        : `Showing rows ${firstItem}–${lastItem} of 813.`;
  });
</script>