<template>
    <div v-if="user_detail.username" class="d-flex">
        <div class="header-btn-lg pr-0">
            <div class="widget-content p-0">
                <div class="widget-content-wrapper">
                    <div class="widget-content-left">
                        <b-dropdown toggle-class="p-0 mr-2" menu-class="dropdown-menu-lg" variant="link" no-caret right>
                            <span slot="button-content">
                                <div class="icon-wrapper icon-wrapper-alt rounded-circle">
                                    <img width="50" height="50" class="rounded-circle" :src="user_detail.img[0].file_info.original.file" alt="">
                                </div>
                            </span>
                            <div class="dropdown-menu-header">
                                <div class="dropdown-menu-header-inner bg-info">
                                    <div class="menu-header-image opacity-2 dd-header-bg-6"></div>
                                    <div class="menu-header-content text-left">
                                        <div class="widget-content p-0">
                                            <div class="widget-content-wrapper">
                                                <div class="widget-content-left mr-3">
                                                    <img width="42" class="rounded-circle" :src="user_detail.img[0].file_info.original.file" alt="">
                                                </div>
                                                <div class="widget-content-left">
                                                    <div class="widget-heading">{{ user_detail.username}}</div>
                                                    <div class="widget-subheading opacity-8">{{ user_detail.role_list[0].username }}</div>
                                                </div>
                                                <div class="widget-content-right mr-2">
                                                    <button
                                                        @click="logout"
                                                        class="btn-shadow btn-shine btn btn-focus"
                                                    >
                                                        Logout
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="scroll-area-xs" style="height: 80px;">
                                <vue-perfect-scrollbar class="scrollbar-container" v-once>
                                    <ul class="nav flex-column">
                                        <li class="nav-item-header nav-item">My Account</li>
                                        <li class="nav-item">
                                            <router-link  
                                                :to="'/user/profile/update'" 
                                                class="nav-link" 
                                                title="Profile"
                                            >
                                                My Profile
                                            </router-link>
                                        </li>
                                    </ul>
                                </vue-perfect-scrollbar>
                            </div>
                        </b-dropdown>
                    </div>
                    <div class="widget-content-left  ml-3 header-user-info">
                        <div class="widget-heading">{{ user_detail.username }}</div>
                        <div class="widget-subheading">{{ user_detail.role_list[0].name }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import VuePerfectScrollbar from 'vue-perfect-scrollbar'
    import VueCircle from 'vue2-circle-progress'

    export default {
        components: {
            VuePerfectScrollbar,
            VueCircle,
        },
        props: {
            user_detail: Object 
        },
        methods: {
            logout() {
                General.logout();
            }
        }
    }


</script>
