@model string
@inject IHttpContextAccessor HttpContextAccessor

@{
    var session = HttpContextAccessor.HttpContext.Session;
}

<a href="#" class="dropdown-toggle" data-toggle="dropdown">
    <!-- The user image in the navbar-->
    <img src="@session.GetString("avatar")" class="user-image" alt="User Image">
    <!-- hidden-xs hides the username on small devices so only the image appears. -->
    <span id="user-name" class="hidden-xs">@Model</span>
</a>
<ul class="dropdown-menu" style="box-shadow: black 0px 0px 2px">
    <!-- The user image in the menu -->
    <li class="user-header">
        <img src="@session.GetString("avatar")" class="img-circle" alt="User Image" id="avatar">
        <p>
            @session.GetString("name") @session.GetString("lastname") - @session.GetString("role")
            <small>@session.GetString("email")</small>
        </p>
    </li>
    <!-- Menu Footer-->
    <li class="user-footer">
        <div class="pull-left">
            <a href="/" class="btn btn-default btn-flat">Profile</a>
        </div>
        <div class="pull-right">
            <a href="#" id="logout-btn" class="btn btn-default btn-flat">Logout</a>
        </div>
    </li>
</ul>

<script>
    $("#logout-btn").on("click", function () {
        $.ajax({
            url: "/Account/_logout",
            dataType: "json",
            type: "POST",
            success: function () {
                window.location.href = "/";
            },
            error: function (xhr, status, error) {
                alert(xhr.responseText)
            }
        })
    });
</script>