<template>
    <v-card
        tile
        flat
        :outlined="page.outlined"
        :height="page.height"
        :width="page.width"
        :color="page.color"
        class="mx-auto overflow-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"
            >
                <cs-btn-reload 
                    :dataprovider="dataprovider" 
                />
            </cs-records-count>
        </v-card-title>

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

        <cs-toolbar 
            :toolbar="toolbar"
        >
            
            <v-sheet 
                max-width="200"
                class="transparent text-truncate text-orange font-weight-bold"
            >
                {{ activeCurs ? activeCurs.name : null}}
            </v-sheet>

            <cs-pagination 
                :dataprovider="dataprovider"
                :width="null"
                htmlClass="mr-0"
            />
        </cs-toolbar>

        <v-card-text class="pa-1"> 
            <cursuri-items 
                :app="app"
                :height="page.height  - 130"
                :width="app.width"
            />
        </v-card-text>

        <curs-action-menu
            :app="app" 
        />

        <curs-filter-menu
            :app="app" 
        />
         
    </v-card>
</template>

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

        components: {
            ImageIcon: require('@CsVueComp/helpers/images/ImageIcon').default,
            CsRecordsCount: require('@CsVueComp/dataprovider/CsRecordsCount').default,
            CsQuickSearch: require('@CsVueComp/dataprovider/CsQuickSearch').default,
            CsBtnReload: require('@CsVueComp/buttons/CsBtnReload').default,
            CsToolbar: require('@CsVueComp/menus/toolbar/CsToolbar').default,
            CsPagination: require('@CsVueComp/dataprovider/CsPagination').default,
        },

        mixins: [
            require('@MyDpoMix/Entities/Curs/Curs.mixin'),
        ],

        name: 'CursuriPage',
    }
</script>