@using WeApp.Helpers
@model WeApp.Models.Layout.TopBarUserAreaViewModel
@if (Model.UserId != null)
{
    var imagePath = string.IsNullOrEmpty(Model.ImagePath) ? "/Content/Image/user.png" : Model.ImagePath;

    <li class="nav-item dropdown user-menu">
        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">
            <img src="@(imagePath)" class="user-image img-circle elevation-2" alt="User Image">
            <span class="d-none d-md-inline">@(Model.Name)</span>
        </a>
        <ul class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
            <!-- User image -->
            <li class="user-header bg-iwb" title="" style="height: auto; padding: 20px 10px;">
                <a href="@Url.Action("UserProfile", "Home", new {area = string.Empty})">
                    <img src="@(imagePath)" class="img-circle elevation-2" alt="User Image" style="max-height: 100px;max-width: 100px;">
                </a>
                <p>
                    @(Model.UserName)
                    <small>@(Model.Email)</small>
                </p>
            </li>

            <!-- Menu Footer-->
            <li class="user-footer">
                <a href="@Url.Action("ChangePassword", "Home", new {area = string.Empty})" class="btn btn-outline-iwb"><i class="iconfont icon-lock" style="padding-right: 5px;"></i>@L("ChangePassword")</a>
                <a href="javascript:LoginOut()" class="btn btn-iwb float-right"><i class="iconfont icon-poweroff" style="padding-right: 5px;"></i>@L("Logout")</a>
            </li>
        </ul>
    </li>
}

@using (Html.BeginScripts())
{
    <script>
        function LoginOut() {
            if (abp && abp.message) {
                abp.message.confirm('@L("LogoutConfirm")', '@L("Logout")',function (isConfirmed) {
                    if (isConfirmed) {
                        window.location.href = "/Account/LogOut";
                    }
                });
            }
        }
    </script>
}