<template>
  <div>
    <div class="flex flex-col gap-4">
      <div>
        <div class="font-bold">start</div>
        <AisPagination v-model="page"
                       :total-rows="100"
                       :per-page="10"
                       :size="'sm'"
                       :align="'start'"
        >
        </AisPagination>
      </div>
      <div>
        <div class="text-center font-bold">center</div>
        <AisPagination v-model="page"
                       :total-rows="100"
                       :per-page="10"
                       :size="'sm'"
                       :align="'center'"
        >
        </AisPagination>
      </div>
      <div>
        <div class="text-right font-bold">end</div>
        <AisPagination v-model="page"
                       :total-rows="100"
                       :per-page="10"
                       :size="'sm'"
                       :align="'end'"
        >
        </AisPagination>
      </div>
      <div>
        <div class="font-bold">fill</div>
        <AisPagination v-model="page"
                       :total-rows="100"
                       :per-page="10"
                       :size="'sm'"
                       :align="'fill'"
        >
        </AisPagination>
      </div>
    </div>


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

<script setup>
    import {ref} from 'vue';
    import AisPagination from '@/components/pagination/AisPagination.vue'

    const page = ref(5)
</script>
