<template>
    <v-card
        tile
        flat
        :outlined="Regionspage.outlined"
        :height="Regionspage.height"
        :width="Regionspage.width"
        :min-width="Regionspage.minWidth"
        :color="Regionspage.color"
        class="card-page-regions"
    >
        <v-card-title class="py-1">

            <v-sheet width="calc(100% - 80px)" class="text-truncate">
                {{ 
                    __('Județe:tara', {
                        tara: (currentCountry ? '. ' + currentCountry.name : '')
                    }) 
                }}
            </v-sheet>

            <v-spacer></v-spacer>
            
            <cs-records-count 
                :dataprovider="dataprovider"
                :disabled="! currentCountry"
                field="itemsCount"
            >
                <cs-btn-reload 
                    :dataprovider="dataprovider" 
                    :disabled="! currentCountry"
                />
            </cs-records-count>
        </v-card-title>

        <v-divider></v-divider>

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

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

        <right-menu 
            :menu="app.menus.Regionrightmenu"
        />
    </v-card>
</template>

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

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

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

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

        components: {
            RegionItems: require('./Items/RegionItems').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,
        },

        name: 'RegionsPage',
    }
</script>

<style lang="scss" scoped>
    .card-page-regions {
        border-left: none !important;
        border-right: none !important;
    }
</style>