@inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.ParagraphViewModel>
@using Dynamicweb.Frontend
@using System.Collections.Generic

@{
    if(Model.Item.TryGetUser("User", out UserViewModel user)) {

        <div class="card shadow-sm" itemscope itemtype="https://schema.org/Person">
            <div class="d-flex flex-wrap gap-0">
                <div class="card-body col-12 col-md-4 d-grid align-content-center text-center lh-1" style="background-color: color-mix(in srgb, var(--bs-body-color) 15%, var(--bs-body-bg));">
                    @if(user.TryGetImageFile(out ImageFileViewModel image))
                    {
                        <figure class="mb-2">
                            <img src="@image.ToGetImage(new(){ Width = 80, Ratio = "1/1" })" alt="@user.Name" class="img-thumbnail rounded-circle" itemprop="image"/>
                        </figure>
                    }
                    @if(!string.IsNullOrEmpty(user.Name))
                    {
                        <h5 itemprop="name">@user.Name</h5>
                    }
                    @if(!string.IsNullOrEmpty(user.JobTitle))
                    {
                        <p class="mb-1 fs-7 text-muted text-opacity-75" itemprop="jobTitle">@user.JobTitle</p>
                    }
                </div>
                <div class="col-12 col-md-8 d-flex">
                    <div class="card-body align-content-center">
                        <div class="grid gap-3 lh-1 fs-7" style="grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));">
                            @if(!string.IsNullOrEmpty(user.Company))
                            {
                                <dl class="m-0">
                                    <dt class="text-uppercase fs-8">@Translate("Company")</dt>
                                    <dd class="mb-0 text-muted text-opacity-75" itemprop="worksFor">@user.Company</dd>
                                </dl>
                            }
                            @if(!string.IsNullOrEmpty(user.Department))
                            {
                                <dl class="m-0">
                                    <dt class="text-uppercase fs-8">@Translate("Department")</dt>
                                    <dd class="mb-0 text-muted text-opacity-75" itemprop="department">@user.Department</dd>
                                </dl>
                            }
                            @if(!string.IsNullOrEmpty(user.Email))
                            {
                                <dl class="m-0">
                                    <dt class="text-uppercase fs-8">@Translate("Email")</dt>
                                    <dd class="mb-0">
                                        <a href="mailto:@user.Email" itemprop="email">
                                            <span>@user.Email</span>
                                        </a>
                                    </dd>
                                </dl>
                            }
                            @if(!string.IsNullOrEmpty(user.PhoneBusiness))
                            {
                                <dl class="m-0">
                                    <dt class="text-uppercase fs-8">@Translate("Phone")</dt>
                                    <dd class="mb-0">
                                        <a href="tel:@user.PhoneBusiness" itemprop="telephone">
                                            <span>@user.PhoneBusiness</span>
                                        </a>
                                    </dd>
                                </dl>
                            }
                        </div>
                    </div>
                </div>
            </div>
        </div>
    }           
}


