<template>
    
    <v-sheet
        :height="height"
        class="overflow-x-hidden overflow-y-auto"
        id="country-scroll-target"
    >
        <country-record 
            v-for="(country, index) in items"
            :key="'country-' + index"
            :app="app"
            :country="country"
            class="mb-1 mr-1"
        />
    </v-sheet>
</template>

<script>
    export default {
        props: {
            app: {required: true},
            dataprovider: {required: true},
            height: {default: null},
        },

        computed: {
            items() {
                return this.dataprovider.items;
            }
        },

        components: {
            CountryRecord: require('./Record/CountryRecord').default,
        },

        name: 'CountryItems',
    }
</script>