<template>
    <div class="list-count text-sm text-gray-500">
        Showing
        <span v-if="totalItems >= perPage">
            <template v-if="currentPage > 1">
                {{ pageFrom }} to {{ pageTo }} of {{ totalItems }}
            </template>
            <template v-else>
                1 to {{ perPage }} of {{ totalItems }}
            </template>
        </span>
        <span v-else>
            {{ totalItems }} of {{ totalItems }}
        </span>
    </div>
</template>


<script>
export default {
    props : {
        totalItems : {
            required : true,
            type : Number
        },
        currentPage : {
            required : true,
            type : Number
        },
        perPage : {
            required : true,
            type : Number
        },
    },
    computed : {
        pageFrom : function () {
            return (this.perPage * (this.currentPage - 1)) + 1;
        },
        pageTo : function () {
            let pageTo = (this.perPage * this.currentPage);
            return pageTo < this.totalItems ? pageTo : this.totalItems;
        },
        numberOfPages : function () {
            return Math.ceil(this.totalItems / this.perPage);
        },
    },
}
</script>
