<template>
  <div class="flex flex-col gap-4 text-center">
    <div class="flex flex-col gap-4">
      <Example label="primary">
        <AisPagination v-model="page"
                       :total-rows="100"
                       :per-page="10"
                       :size="'sm'"
                       variant="primary"
        >
        </AisPagination>
      </Example>
      <Example label="secondary">
        <AisPagination v-model="page"
                       :total-rows="100"
                       :per-page="10"
                       :size="'sm'"
                       variant="secondary"
        >
        </AisPagination>
      </Example>
      <Example label="default">
        <AisPagination v-model="page"
                       :total-rows="100"
                       :per-page="10"
                       :size="'sm'"
                       variant="default"
        >
        </AisPagination>
      </Example>
      <Example label="info">
        <AisPagination v-model="page"
                       :total-rows="100"
                       :per-page="10"
                       :size="'sm'"
                       variant="info"
        >
        </AisPagination>
      </Example>
      <Example label="success">
        <AisPagination v-model="page"
                       :total-rows="100"
                       :per-page="10"
                       :size="'sm'"
                       variant="success"
        >
        </AisPagination>
      </Example>
      <Example label="warning">
        <AisPagination v-model="page"
                       :total-rows="100"
                       :per-page="10"
                       :size="'sm'"
                       variant="warning"
        >
        </AisPagination>
      </Example>
      <Example label="danger">
        <AisPagination v-model="page"
                       :total-rows="100"
                       :per-page="10"
                       :size="'sm'"
                       variant="danger"
        >
        </AisPagination>
      </Example>
    </div>

    <div>Selected Page = [{{ page }}]</div>
  </div>
</template>

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

    const page = ref(5)
</script>
