<section class="demo-section">
  <h2>Pagination</h2>

  <nav class="pagination" aria-label="Pagination">
    <button type="button" class="pagination-item" disabled aria-label="Previous page"><i class="ph ph-caret-left" aria-hidden="true"></i></button>
    <button type="button" class="pagination-item pagination-item-active" aria-current="page">1</button>
    <button type="button" class="pagination-item">2</button>
    <button type="button" class="pagination-item">3</button>
    <button type="button" class="pagination-item">4</button>
    <button type="button" class="pagination-item">5</button>
    <button type="button" class="pagination-item" aria-label="Next page"><i class="ph ph-caret-right" aria-hidden="true"></i></button>
  </nav>

  <h3>Vue pagination</h3>
  <div id="vue-pagination-app" class="vue-mount"></div>
  <script type="module">
    import { createApp, ref } from "vue";
    import { GnPagination } from "/vue/index.js";

    createApp({
      components: { GnPagination },
      setup() {
        const page = ref(1);
        return { page };
      },
      template: `
        <gn-pagination v-model:page="page" :total-pages="5"></gn-pagination>
      `
    }).mount("#vue-pagination-app");
  </script>
</section>