<template>
    <v-card
        tile
        flat
        :outlined="page.outlined"
        :height="page.height"
        :width="24 + app.datatables.Config.dtWidth"
        :color="page.color"
        class="mx-auto overflow-x-auto overflow-y-hidden"
    >   
        <v-card-title class="pa-1">
            <image-icon 
                :src="app.url + 'imgs/blue-icons/' + page.image + '.png'"
            />
            {{ __(page.title) }} 

            <v-spacer></v-spacer>
            
            <cs-quick-search 
                :dataprovider="dataprovider" 
                class="mr-2"
            />
            
            <cs-records-count 
                :dataprovider="dataprovider"
                field="itemsCount"
            >
                <cs-btn-reload 
                    :dataprovider="dataprovider" 
                />
            </cs-records-count>

        </v-card-title>

        <v-card-subtitle class="pl-12 mt-0">
            {{ __(page.subtitle) }}
        </v-card-subtitle>

        <v-card-text class="pa-1">
            <config-items 
                :app="app"
                :dataprovider="dataprovider"
                :height="page.height  - 82"
            />
        </v-card-text>
                
    </v-card>
</template>

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

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

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

        created() {
            this.dataprovider.Post();
        },

        components: {
            ImageIcon: require('@CsVueComp/helpers/images/ImageIcon').default,
            ConfigItems: require('./Items/ConfigItems').default,

            CsRecordsCount: require('@CsVueComp/dataprovider/CsRecordsCount').default,
            CsQuickSearch: require('@CsVueComp/dataprovider/CsQuickSearch').default,
            CsBtnReload: require('@CsVueComp/buttons/CsBtnReload').default,

        },

        name: 'ConfigPage',
    }
</script>