<template>
    <v-card
        tile
        flat
        :outlined="Countriespage.outlined"
        :height="Countriespage.height"
        :width="Countriespage.width"
        :min-width="Countriespage.minWidth"
        :color="Countriespage.color"
    >
        <v-card-title class="py-1">
            {{ __('Țări') }}

            <v-spacer></v-spacer>
            
            <cs-records-count 
                :dataprovider="dataprovider"
            >
                <cs-btn-reload 
                    :dataprovider="dataprovider" 
                />
            </cs-records-count>
        </v-card-title>
        
        <v-divider></v-divider>

        <v-toolbar 
            dense 
            flat
        >
            <cs-quick-search 
                :dataprovider="dataprovider" 
            />
        </v-toolbar>

        <v-divider></v-divider>

        <v-card-text class="pa-1">
            <country-items 
                :app="app"
                :dataprovider="dataprovider"
                :height="Countriespage.height  - 2 * 49"
            />
        </v-card-text>

        <right-menu 
            :menu="app.menus.Countryrightmenu"
        />

    </v-card>
</template>

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

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

            dataprovider() {
                return this.app.dataSession.Countries;
            }
        },

        components: {
            CountryItems: require('./Items/CountryItems').default,
            CsRecordsCount: require('@CsVueComp/dataprovider/CsRecordsCount').default,
            CsQuickSearch: require('@CsVueComp/dataprovider/CsQuickSearch').default,
            CsBtnReload: require('@CsVueComp/buttons/CsBtnReload').default,
            RightMenu: require('@CsVueComp/menus/rightmenu/RightMenu').default,
        },

        created() {
            this.dataprovider.Post();
        },
        
        name: 'CountriesPage',
    }
</script>

