@inherits ViewModelTemplate<UserViewModel>
@using Dynamicweb.Rendering
@using Dynamicweb.Frontend
@using Dynamicweb.Users.Frontend
@using Dynamicweb.Ecommerce.Frontend

@{
    string editProfileLink = !string.IsNullOrEmpty(SearchEngineFriendlyURLs.GetFriendlyUrl(GetPageIdByNavigationTag("EditProfile"))) ? SearchEngineFriendlyURLs.GetFriendlyUrl(GetPageIdByNavigationTag("EditProfile")) : string.Empty;
}

<header class="hstack gap-3 mb-4">
    <h1 class="h4 mb-0">@(Pageview.Page.GetDisplayName())</h1>
</header>

<div class="card mb-4">
	<div class="card-body hstack gap-4 align-items-start p-4">
        @if(Model.TryGetImageFile(out ImageFileViewModel? image))
        {
            <div class="align-self-auto hstack justify-content-center p-0" style="height:6rem; aspect-ratio:1;">
                <img src="@image.ToGetImage(new(){ Width = 500, 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 disabled opacity-100" style="height:6rem; aspect-ratio:1; --bs-btn-disabled-bg: var(--dw-color-button-primary)" data-dw-button="primary">
                <div class="d-flex dw-h4 lh-1 m-0">
                    @(Model.GetTwoLetterInitials())
                </div>
            </div>
        }

        <div class="flex-fill align-self-center">
            @if (!string.IsNullOrEmpty(Model.Name)) {
                <h4 class="mb-1">@Model.Name</h4>
            }
            <div class="text-muted fs-7">
                <span>@string.Join(" - ", new[]{ Model.Title, Model.Company }.Where(s => !string.IsNullOrWhiteSpace(s)))</span>
            </div>
            <div class="text-muted fs-8">
                <span>@string.Join(", ", new[]{ Model.City, Model.Country }.Where(s => !string.IsNullOrWhiteSpace(s)))</span>
            </div>
        </div>

        @if (!string.IsNullOrEmpty(editProfileLink)) {
            <a href="@editProfileLink" class="btn btn-link icon-2" title="@Translate("Edit profile")">
                @ReadFile("/Files/Images/Icons/pen.svg")
            </a>
        }
    </div>
</div>

@if (new[] { Model.FirstName, Model.LastName, Model.Email, Model.Phone }.Any(s => !string.IsNullOrWhiteSpace(s)))
{
    <div class="card mb-4">
        <div class="card-header bg-body border-0 p-4 pb-0">
            <h1 class="card-title h5 mb-0">@Translate("Personal information")</h1>
        </div>
        <div class="card-body grid p-4">
            <div class="g-col-12 g-col-lg-6 fs-7">
                @if (!string.IsNullOrEmpty(Model.FirstName)) {
                    <dl>
                        <dt class="text-muted fw-normal">@Translate("First name")</dt>
                        <dd>@Model.FirstName</dd>
                    </dl>
                }
                @if (!string.IsNullOrEmpty(Model.Email)) {
                    <dl>
                        <dt class="text-muted fw-normal">@Translate("Email address")</dt>
                        <dd><a href="mailto:@Model.Email">@Model.Email</a></dd>
                    </dl>
                }
            </div>
            <div class="g-col-12 g-col-lg-6 fs-7">
                @if (!string.IsNullOrEmpty(Model.LastName)) {
                    <dl>
                        <dt class="text-muted fw-normal">@Translate("Last name")</dt>
                        <dd>@Model.LastName</dd>
                    </dl>
                }
                @if (!string.IsNullOrEmpty(Model.Phone)) {
                    <dl>
                        <dt class="text-muted fw-normal">@Translate("Phone")</dt>
                        <dd><a href="tel:@Model.Phone">@Model.Phone</a></dd>
                    </dl>
                }
            </div>
        </div>
    </div>
}

@if (new[] { Model.Name, Model.Address, Model.Address2, Model.Zip, Model.City, Model.Country, Model.Email, Model.Phone }.Any(s => !string.IsNullOrWhiteSpace(s)))
{
    <div class="card mb-4">
        <div class="card-header bg-body border-0 p-4 pb-0">
            <h1 class="card-title h5 mb-0">@Translate("Address")</h1>
        </div>
        <div class="card-body grid p-4">
            <div class="g-col-12 g-col-lg-6 fs-7">
                @if (!string.IsNullOrEmpty(Model.Name)) {
                    <dl>
                        <dt class="text-muted fw-normal">@Translate("Name")</dt>
                        <dd>@Model.Name</dd>
                    </dl>
                }
                @if (!string.IsNullOrEmpty(Model.Address)) {
                    <dl>
                        <dt class="text-muted fw-normal">@Translate("Address")</dt>
                        <dd>@Model.Address</dd>
                    </dl>
                }
                @if (!string.IsNullOrEmpty(Model.Address2)) {
                    <dl>
                        <dt class="text-muted fw-normal">@Translate("Address") 2</dt>
                        <dd>@Model.Address2</dd>
                    </dl>
                }
                @if (Model.GetStateName() != null) {
                    <dl>
                        <dt class="text-muted fw-normal">@Translate("State")</dt>
                        <dd>@Model.GetStateName()</dd>
                    </dl>
                }
                @if (!string.IsNullOrEmpty(Model.Zip)) {
                    <dl>
                        <dt class="text-muted fw-normal">@Translate("Zip")</dt>
                        <dd>@Model.Zip</dd>
                    </dl>
                }
                @if (!string.IsNullOrEmpty(Model.City)) {
                    <dl>
                        <dt class="text-muted fw-normal">@Translate("City")</dt>
                        <dd>@Model.City</dd>
                    </dl>
                }
                @if (!string.IsNullOrEmpty(Model.Country)) {
                    <dl>
                        <dt class="text-muted fw-normal">@Translate("Country")</dt>
                        <dd>@Model.Country</dd>
                    </dl>
                }
            </div>
            <div class="g-col-12 g-col-lg-6 fs-7">
                @if (!string.IsNullOrEmpty(Model.Email)) {
                    <dl>
                        <dt class="text-muted fw-normal">@Translate("Email")</dt>
                        <dd><a href="mailto:@Model.Email">@Model.Email</a></dd>
                    </dl>
                }
                @if (!string.IsNullOrEmpty(Model.Phone)) {
                    <dl>
                        <dt class="text-muted fw-normal">@Translate("Phone")</dt>
                        <dd><a href="tel:@Model.Phone">@Model.Phone</a></dd>
                    </dl>
                }
            </div>
        </div>
    </div>
}