{namespace userprofile=In2code\Userprofile\ViewHelpers}
{namespace t3omy=T3o\T3omy\ViewHelpers}
<f:comment>
<f:debug>{frontendUser.uid}</f:debug>
<f:debug title="FE USer:{frontendUser.uid}">{t3omy:isSlackOnline(frontendUserUID:'{frontendUser.uid}')}</f:debug>
</f:comment>



<f:link.action class="user-box" controller="UserProfile" action="show" arguments="{user:frontendUser}">
    <div class="user-box-image ">
        <f:if condition="{frontendUser.image} AND {userprofile:isPropertyVisible(propertyName: 'image', user: '{frontendUser}')}">
            <f:then>
                <f:for each="{frontendUser.image}" as="file" iteration="iter">
                    <f:if condition="{iter.isFirst}">
                        <f:media class="img-fluid rounded-circle"
                                 file="{file}"
                                 width="150px"
                                 height="150px"
                                 alt="{file.alternative}"
                                 title="{file.title}" />
                    </f:if>
                </f:for>
            </f:then>
            <f:else>
                <f:image class="img-fluid rounded-circle"
                         src="EXT:t3omy/Resources/Public/Images/UserProfile/UserProfile-Blank.svg"
                         width="150px"
                         height="150px"
                         alt="User Image Placeholder"/>
            </f:else>
        </f:if>
    </div>

    <div class="user-box-text ">
        <f:if condition="{frontendUser.name} AND {userprofile:isPropertyVisible(propertyName: 'name', user: '{frontendUser}')}">
            <h4 class="user-box-text__name text-uppercase text-large">{frontendUser.name}</h4>
            {f:variable(name:"hasHeading", value:"1")}
        </f:if>

        <f:if condition="{frontendUser.company} AND {userprofile:isPropertyVisible(propertyName: 'company', user: '{frontendUser}')}">
            <h5 class="user-box-text__company text-large">{frontendUser.company}</h5>
            {f:variable(name:"hasHeading", value:"1")}
        </f:if>

        <f:if condition="{hasHeading} == 1">
            <hr class="hr">
        </f:if>

        <f:if condition="{frontendUser.email} AND {userprofile:isPropertyVisible(propertyName: 'email', user: '{frontendUser}')}">
            <div class="user-box-text__icon">
                <i class="fa fa-envelope"></i>
                <span>{frontendUser.email}</span>
            </div>
        </f:if>

        <f:if condition="{frontendUser.telephone} AND {userprofile:isPropertyVisible(propertyName: 'telephone', user: '{frontendUser}')}">
            <div class="user-box-text__icon">
                <i class="fa fa-phone"></i>
                <span>{frontendUser.telephone}</span>
            </div>
        </f:if>

    </div>

    <div class="user-box-badge {t3omy:isSlackOnline(frontendUserUID:'{frontendUser.uid}')}">
        <i class="fa fa-2x fa-slack" aria-hidden="true"></i>
    </div>

</f:link.action>