<template>
  <div>
    <div class="space-y-3">
      <div>
        <AisPagination v-model="page"
                       :total-rows="100"
                       :per-page="10"
                       :size="'sm'"
        >
          <template #first-text>
            <AisIcon icon="first" class="icon-only"/>
          </template>
          <template #prev-text>
            <AisIcon icon="left" class="icon-only"/>
          </template>
          <template #ellipsis-text>
            <AisIcon :icon="faEllipsisH" class="icon-only"/>
          </template>
          <template #next-text>
            <AisIcon icon="right" class="icon-only"/>
          </template>
          <template #last-text>
            <AisIcon icon="last" class="icon-only"/>
          </template>
        </AisPagination>
      </div>
    </div>


    <div class="mt-3 text-center">Selected Page = [{{ page }}]</div>
  </div>
</template>

<script setup>
    import {ref} from 'vue';
    import AisPagination from '@/components/pagination/AisPagination.vue'
    import AisIcon from '@/components/icon/AisIcon.vue'
    import { faEllipsisH } from '@fortawesome/free-solid-svg-icons'
    import { library } from '@fortawesome/fontawesome-svg-core'
    library.add( faEllipsisH)


    const page = ref(5)
</script>
