<template>
    <v-card
        tile
        flat
        :width="app.width"
        :height="app.height"
        class="overflow-x-auto overflow-y-hidden"
    >  
        <v-card-title class="px-1 py-0">
            <image-icon 
                :src="app.url + 'imgs/blue-icons/roles.png'"
            />
            {{ __('Roluri') }}

            <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>

        <cs-toolbar 
            :toolbar="toolbar"
        >
            <v-sheet 
                max-width="200"
                class="transparent text-truncate text-dark-blue font-weight-bold"
            >
               {{activeRecord ? activeRecord.name : ''}}
            </v-sheet>
        </cs-toolbar>

        <v-card
            tile
            flat
            :width="app.width"
            :height="app.height - 84"
            :disabled="datatableDisabled"
            outlined
            class="overflow-hidden d-flex"
        >
            <v-sheet
                :width="300"
                :height="app.height - 84"
            >
                <roles-list
                    :app="app"
                    :width="300"
                    :height="app.height - 84"
                    :dataprovider="dataprovider"
                />
            </v-sheet>

            <v-sheet
                :width="'calc(100% - 300px)'"
                :height="app.height - 84"
            >
                <role-permissions-list 
                    v-if="! activePermission"
                    :app="app"
                    width="100%"
                    :height="app.height - 84"
                />

                <v-sheet
                    v-else-if="activeRecord"
                    width="100%"
                    :height="app.height - 84"
                >

                    <role-permission-settings 
                        :app="app"
                        :permission="activePermission"
                        :role="activeRecord"
                        :allpermissions="allpermissions"
                        :height="app.height - 84"
                        @updated="app.classes.Controller.SetActivePermission(null)"
                    />
                    
                </v-sheet>
            </v-sheet>
        </v-card>
        
        
    </v-card>
</template>

<script>
    /**
     * title = 36, toolbar = 48
     */
    export default {
        props: {
            app: {required: true},
        },

        computed: {

            // form() {
            //     return this.app.forms.Users;
            // },

            // statuses() {
            //     return this.app.dataSession.Statuses.statuses;
            // },
            allpermissions() {
                return this.app.dataSession.Permissionsall.items;
            },

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

            toolbar() {
                return this.app.menus.Rolestoolbar;
            },

            activeRecord() {
                return this.app.classes.Controller.activeRecord;
            },

            activePermission() {
                return this.app.classes.Controller.activePermission;
            },

            datatableDisabled() {
                return this.app.classes.Controller.datatableDisabled;
            }
        },

        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,
        },

        name: 'RolesPage',
    }
</script>