<template>
    <v-card
        tile
        flat
        :outlined="Containerpage.outlined"
        :height="Containerpage.height"
        :width="Containerpage.width"
        :color="Containerpage.color"
        class="mx-auto d-flex overflow-x-auto overflow-y-hidden"
    >   
        <countries-page 
            :app="app"
        />

        <regions-page 
            :app="app"
        />

        <cities-page 
            :app="app"
        />
    </v-card>
</template>

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

        computed: {
            Containerpage() {
                return this.app.classes.Containerpage;
            },
        },

        components: {
            CountriesPage: require('./Countries/CountriesPage').default,
            RegionsPage: require('./Regions/RegionsPage').default,
            CitiesPage: require('./Cities/CitiesPage').default,
        },

        name: 'ContainerPage',
    }
</script>