<template>
    <v-card
        tile
        flat
        :outlined="Citiespage.outlined"
        :height="Citiespage.height"
        :width="Citiespage.width"
        :color="Citiespage.color"
    >
        <v-card-title class="py-1">

            <v-sheet width="calc(100% - 120px)" class="text-truncate">
                {{ 
                    __('Localități:judet', {
                        judet: (currentRegion ? '. ' + currentRegion.name : '')
                    }) 
                }}
            </v-sheet>

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

        <v-divider></v-divider>

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

        <v-divider></v-divider>

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

        </v-card-text>

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

<script>
    export default {

        props: {
            app: {required: true},
        },

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

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

            dataprovider() {
                return this.app.dataSession.Cities;
            }

        },

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