<!--suppress JSAnnotator -->
<template>
    <!-- Page, data-name contains page name which can be used in callbacks -->
    <div class="page " data-name="admin"> <!-- page-with-subnavbar -->
        <!-- Top Navbar -->
        <div class="navbar">
            <div class="navbar-inner">
                <div class="left">

                </div>

                <div class="title sliding">
                    <div class="segmented segmented-custom">
                        <button class="button tooltip-init button-active" data-tooltip="{{@global.LANGUAGE.HOME_MSG022}}">
                            <i class="f7-icons icon icon-header-dashboard"></i>
                        </button>
                        <button class="button tooltip-init " data-tooltip="{{@global.LANGUAGE.ADMIN_PANEL_MSG00}}">
                            <i class="f7-icons icon icon-header-tracking"></i>
                        </button>
                        <button class="button tooltip-init " data-tooltip="{{@global.LANGUAGE.ADMIN_PANEL_MSG05}}">
                            <i class="f7-icons icon icon-header-admin"></i>
                        </button>

                    </div>

                </div>

                <div class="right">

                    <a @click="showUserMenu" href="#" class="link " >
                        <i class="f7-icons icon icon-admin-users margin-right-16" ></i>
                        {{ UserName }}
                    </a>
                </div>
            </div>
        </div>

        <div class="page-content bg-color-lightgray ">

        </div>
    </div>
</template>

<script>
    // script must return component object
    return {
        data: function () {
            var self = this;

            var userInfo = self.$app.methods.getFromStorage('userInfo')?.UserInfo;
			
			console.log('user',self.$app.methods.getFromStorage('userInfo'))
            var ret = {
                UserName: userInfo.FirstName + ' ' + userInfo.SurName
            };

            return ret;
        },

        methods: {
            hidePanelLeft: function(){
                $$('body').addClass('panel-left-hidden');
            },
            showUserMenu: function (e) {
                let self= this;

                var content =   `<div class="popover menu-popover" >
                                        <div class="popover-inner">
                                            <div class="list no-hairlines no-hairlines-between">
                                                <ul>
                                                    <li>
                                                        <a href="#" class="item-link item-content popover-close">
                                                            <div class="item-media"><i class="f7-icons icon icon-profile-name"></i></div>
                                                            <div class="item-inner">
                                                                <div class="item-title">${ LANGUAGE.ADMIN_PANEL_MSG12 }</div>
                                                            </div>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="#" class="item-link item-content popover-close" onclick="app.methods.logout();">
                                                            <div class="item-media"><i class="f7-icons icon icon-power"></i></div>
                                                            <div class="item-inner">
                                                                <div class="item-title">${ LANGUAGE.MENU_MSG04 }</div>
                                                            </div>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>`;
                self.$app.popover.create({
                    backdrop: false,
                    closeByOutsideClick: true,
                    targetEl: e.target,
                    content: content,
                    on: {
                        opened: function(popover){
                            //console.log(popover);
                        },
                        closed: function(popover){
                            popover.destroy();
                        }
                    }
                }).open();
            }

        },

        on: {
            pageInit: function (e, page) {
                var self = this;

                self.hidePanelLeft();

            }
        }
    };
</script>