<template>
    <v-sheet
        tile
        color="transparent"
        :width="width"
        :class="htmlClass"
    >
        <v-pagination
            :length="dataprovider.last_page"
            :total-visible="totalVisible"
            v-model="currentPage"
        >
        </v-pagination>
    </v-sheet>
</template>

<script>

    export default {

        props: {
            dataprovider: {required: true},
            length: {default: 0},
            totalVisible: {default: 7},
            width: {default: '100%'},
            htmlClass: {default: 'mx-auto'}
        },

        computed: {
            currentPage: {
                get: function() {
                    return this.dataprovider.current_page;
                },

                set: function(current_page) {
                    this.dataprovider.ChangeCurrentPage(current_page)
                }
            },
        },

        name: 'CsPagination',
    }
</script>