<template>
    <v-card
        tile
        flat
        :width="width"
        :height="height"
        class="overflow-x-auto"
    >
        <cs-centered-alert 
            v-if="! activeRecord"
            :height="height"
            message="Niciun rol nu este selectat"
        />

        <v-sheet
            v-else
            class="pa-1 overflow-y-auto"
            :height="height"
        >

            <role-permission-item 
                v-for="(permission, index) in permissions"
                :key="'permission-' + index"
                :app="app"
                :permission="permission"
                :role="activeRecord"
            />
            
        </v-sheet>
        
    </v-card>
</template>

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

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

            activeRecord() {
                return this.controller.activeRecord;
            },

            rolePermissions() {
                return this.activeRecord.permissions;
            },

            permissions() {
                return this.app.dataSession.Permissions.items;
            }

          
        },

        components: {
            CsCenteredAlert: require('@CsVueComp/sheets/CsCenteredAlert').default,
        },
        
        name: 'RolePermissionsList',
    }
</script>