<template>
    <v-card
        tile
        flat
        :width="width"
        :height="height"
        class="text-caption pa-1"
    >
        <cs-centered-alert 
            v-if="! activePermission"
            :height="height - 8"
            message="Nicio permisiune nu este selectată"
        />

        <v-sheet
            v-else
            :height="height - 8"
            :width="width"
            class="overflow-y-auto"
        >
            <permission-children-item 
                v-for="(child, index) in activePermission.children"
                :key="'child-' + index"
                :app="app"
                :child="child"
            /> 
        </v-sheet>
        

        <children-form-menu 
            :app="app"
            :disabled="! activePermission"
        />
        
    </v-card>
</template>

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

        computed: {

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

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

        components: {
            CsCenteredAlert: require('@CsVueComp/sheets/CsCenteredAlert').default,
        },

        name: 'PermissionChildrenList',
    }
</script>