<template>
    <v-menu 
        offset-y 
        transition="slide-x-transition" 
        bottom 
        left 
        tile
        v-model="menu.isVisible"
    >
        <template v-slot:activator="{ on }">
            <v-btn 
                icon 
                rounded
                small
                class="mr-3"
                v-on="on"
            >
                <user-avatar 
                    :user="app.user"
                />
            </v-btn>
        </template>

        <v-card>
            <v-list>
                <v-list-item>
                    <div class="font-weight-bold text-dark-blue text-caption">
                        {{app.user.full_name}}<br/>
                        <span class="orange--text text-body-2 text-caption">
                            {{app.user.role ? app.user.role.name : __('Fără rol') }}
                        </span>
                    </div>
                </v-list-item>

                <v-divider></v-divider>

                <v-list-item 
                    v-for="(item, key) in menu.getOptions"
                    :key="'item-' + key"
                    dense
                    @click="OnClick(item)"
                >
                    <v-icon 
                        class="text-dark-blue" 
                        v-text="item.icon"
                    >
                    </v-icon>

                    <span class="text-dark-blue">
                        {{ __(item.caption) }}
                    </span>
                </v-list-item>
            </v-list>
        </v-card>
    </v-menu>
</template>

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

        computed: {
            menu() {
                return this.app.menus.Headeruserpopup;
            }
        },

        methods: {
            OnClick(item) {
                return item.OnClick(this);
            }
        },

        components: {
            UserAvatar: require('VUECOMP/VIEWS/Attributes/Users/UserAvatar').default,
        },

        name: 'UserPopup',
    }
</script>