<template>
    <header class="header header-nav-menu header-nav-links">
        <div class="logo-container">
            <a href="../" class="logo">
                
                <!--<img src="../../resources/img/logobp.png" class="logo-image" alt="Best Pharma">
                <img src="../../resources/img/logobp-sm.png" class="logo-image-mobile" width="45" height="45" alt="Porto Admin">-->
                AISACA

            </a>
            <button class="btn header-btn-collapse-nav d-none" data-toggle="collapse" data-target=".header-nav">
                <i class="fas fa-bars"></i>
            </button>

            
        </div>

        <!-- start: search & user box -->
        <div class="header-right d-none d-lg-block d-xl-block">


            <span class="separator"></span>


            <div id="userbox" class="userbox">
                <a href="#" data-toggle="dropdown" aria-expanded="false">
                    <span class="profile-picture profile-picture-as-text">JD</span>
                    <div class="profile-info profile-info-no-role">
                        <span class="name">Xin chào, <strong class="font-weight-semibold">{{$store.state.user.user.Username}}</strong></span>
                    </div>
                    <i class="fas fa-chevron-down text-color-dark"></i>
                </a>

                <div class="dropdown-menu" style="">
                    <ul class="list-unstyled">
                        <!--<li>
                            <a role="menuitem" tabindex="-1" href="pages-user-profile.html"><i class="bx bx-user"></i> My Profile</a>
                        </li>
                        <li>
                            <a role="menuitem" tabindex="-1" href="#" data-lock-screen="true"><i class="bx bx-lock-open-alt"></i> Lock Screen</a>
                        </li>-->
                        <li>
                            <form action="/Account/Logout" method="post" id="logoutForm">
                                <a role="menuitem" tabindex="-1" href="javascript:void(0);" onclick="document.getElementById('logoutForm').submit();">
                                <i class="bx bx-log-out"></i> Đăng xuất</a>
                            </form>
                            
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- end: search & user box -->

    </header>
</template>

<script>
    
    export default {
        created() {
            console.log(this.$store.state.user.user.Username);
        },
        methods: {

        }
    }
</script>
<style>
    a.logo {
        font-size: 1.6rem;
        width: 260px;
        padding: 15px 0px 0 0px !important;
        padding-top: 20px !important;
        margin: 0 !important;
        text-align: center;
        color: #333;
    }
    a.logo::after {
        border-right: none !important;
        border-bottom: none !important;
    }
    @media (max-width: 767px){
        a.logo {
            margin: 0;
            padding: 0 !important;
            width: 115px;
        }
    }
    html.modern .header-right{
        height:113px !important;
    }
</style>