@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 h-100 border-0 text-center mx-auto" style="max-inline-size: 25rem;" itemscope itemtype="https://schema.org/Person">
            @if(user.TryGetImageFile(out ImageFileViewModel image))
            {
                <figure class="m-0">
                    <img src="@image.ToGetImage(new(){ Width = 400, Ratio = "1/1" })" class="card-img shadow" alt="@user.Name" itemprop="image">
                </figure>
            }
            
            <div class="card-body fs-7">
                @if(!string.IsNullOrEmpty(user.Name))
                {
                    <h3 class="h4 pt-1 mb-2" itemprop="name">@user.Name</h3>
                }
                @if(!string.IsNullOrEmpty(user.JobTitle))
                {
                    <p class="mb-0 text-muted text-opacity-75" itemprop="jobTitle">@user.JobTitle</p>
                }
                <div class="border-top mx-auto my-3" style="max-width: 5rem;"></div>
                @if(!string.IsNullOrEmpty(user.Department))
                {
                    <p class="mb-0 text-muted text-opacity-75" itemprop="department">@user.Department</p>
                }
                @if(!string.IsNullOrEmpty(user.Company))
                {
                    <p class="mb-0 text-muted text-opacity-75" itemprop="worksFor">@user.Company</p>
                }
                @if(!string.IsNullOrEmpty(user.Email))
                {
                    <a href="mailto:@user.Email" itemprop="email">
                        <span class="d-block pt-2">@user.Email</span>
                    </a>
                }
                @if(!string.IsNullOrEmpty(user.PhoneBusiness))
                {
                    <a href="tel:@user.PhoneBusiness" itemprop="telephone">
                        <span class="d-block pt-1">@user.PhoneBusiness</span>
                    </a>
                }
            </div>
        </div>
    }           
}
