<template>
    <div class="relative">
        <select v-model="perPage"
                class="form-input w-full block rounded-sm pr-10 sm:text-sm sm:leading-5"
                @change="change"
        >
            <option v-for="option in options" v-bind:value="option.value">
                {{ option.text }}
            </option>
        </select>
        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-500">
            <svg class="fill-current h-4 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
            </svg>
        </div>
    </div>
</template>


<script>
export default {
    data() {
        return {
            perPage : 20,
            options : [
                {text : '3', value : '3'},
                {text : '5', value : '5'},
                {text : '10', value : '10'},
                {text : '15', value : '15'},
                {text : '20', value : '20'},
                {text : '25', value : '25'},
                {text : '50', value : '50'},
                {text : '75', value : '75'},
                {text : '100', value : '100'},
                {text : '1000', value : '1000'},
            ]
        }
    },
    methods : {
        change() {
            this.$emit('perPageChanged', this.perPage);
        },
    }
}
</script>
