@inherits Dynamicweb.Rendering.ViewModelTemplate<UserViewModel>
@using Dynamicweb.Frontend
@using Dynamicweb.Security.UserManagement

@if (Model?.ID is null) return;

@{
    var viewProfileLink = GetPageIdByNavigationTag("ViewProfile");
    var customerCenterLink = GetPageIdByNavigationTag("CustomerCenter");
    var hasLink = viewProfileLink is not 0 || customerCenterLink is not 0;
    var avatarLink = viewProfileLink is not 0 ? SearchEngineFriendlyURLs.GetFriendlyUrl(viewProfileLink) : customerCenterLink is not 0 ? SearchEngineFriendlyURLs.GetFriendlyUrl(customerCenterLink) : null;
}

<div class="vstack align-items-center justify-content-center py-2 position-relative" hx-swap-oob="true outerHTML:[data-customer-info-swift-avatar]" data-customer-info-swift-avatar>
    <div class="position-relative rounded-circle align-self-auto hstack justify-content-center p-0" style="height:4rem; aspect-ratio:1;">
        @if (hasLink) {
            <a href="@(avatarLink)" class="btn btn-primary icon-2 rounded-circle position-absolute p-0 opacity-0 opacity-100-hover" style="inset:0;" data-dw-button title="@Translate(viewProfileLink is not 0 ? "View profile" : "View customer center")">
                @ReadFile("/Files/Images/Icons/eye.svg")
            </a>
        }
        @if(Model.TryGetImageFile(out ImageFileViewModel? image))
        {
            <div class="align-self-auto hstack justify-content-center p-0" style="height:4rem; aspect-ratio:1;">
                <img src="@image.ToGetImage(new(){ Width = 60, Ratio = "1/1" })" alt="@Model.Name" class="img-thumbnail rounded-circle" itemprop="image"/>
            </div>
        }
        else 
        {
            <div class="btn btn-primary rounded-circle align-self-auto hstack justify-content-center p-0 @(!hasLink ? "pe-none" : null)" style="height:4rem; aspect-ratio:1;" data-dw-button>
                <div class="d-flex dw-h6 lh-1 m-0 float-start text-decoration-none">
                    @(Model.GetTwoLetterInitials())
                </div>
            </div>
        }
    </div>

    <h5 class="h6 mb-0 text-center mt-2">
        @((!string.IsNullOrEmpty(Model?.FirstName) && !string.IsNullOrEmpty(Model?.LastName)) ? $"<span>{Model.FirstName}</span> <span>{Model.LastName}</span>" : Model?.Name)
    </h5>
    
    @if ( UserContext.Current.ImpersonatingUser is not null)
    {
       <p class="text-muted fs-8 mb-0">@Translate("Impersonated by") @(UserContext.Current.ImpersonatingUser?.Name)</p>
    }
</div>