<template>
    <v-menu>
        <template v-slot:activator="{ on, attrs }">
            <v-btn
                color="transparent"
                icon
                v-bind="attrs"
                v-on="on"
            >
                <v-icon color="white">mdi-dots-horizontal</v-icon>
            </v-btn>
        </template>

        <v-list class="ma-0 pa-0">
            <v-list-item 
                v-for="(item, index) in items" 
                :key="'item-' + index" 
                @click="OnClick(item, $event)"
            >
                <v-list-item-title class="text-caption">
                    {{ __(item.title, {name: role.name}) }}
                </v-list-item-title>
            </v-list-item>
        </v-list>
    </v-menu>
</template>

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

        data: () => ({
            items: [
                { 
                    title: 'Vezi permisiunile rolului :name',
                    click: (app, role, e) => app.classes.Utilizatori.Menus.Show('rolepreview', e, role),
                },
            ],
        }),

        methods: {
            OnClick(item, e) {
                item.click(this.app, this.role, e)
            }
        },
        
        name: 'UserRolesDetailedListItemMenu',
    }
</script>