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

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