{namespace neos=Neos\Neos\ViewHelpers}
{namespace theme=Newland\CityTheme\ViewHelpers}
{namespace vh=Newland\NeosViewHelpers\ViewHelpers}
{namespace ts=Neos\Fusion\ViewHelpers}

<div class="o-container o-container--sm {marginTop}">
    <figure class="c-person">
        <div class="c-person__image-wrapper">
            <noscript>
                <img src="{neos.media:uri.image(image: image, maximumWidth: 640)}"
                     alt="{alternativeText}"
                     class="c-person__image"
                     {f:if(condition: focusPoint, then: "style='object-position: {focusPoint};'", else: '')}
                     />

            </noscript>
            <img data-src="{neos.media:uri.image(image: image, maximumWidth: 640)}"
                 alt="{alternativeText}"
                 class="c-person__image lazyload"
                 {f:if(condition: focusPoint, then: "style='object-position: {focusPoint};'", else: '')}
                 />
        </div>

        <figcaption class="c-person__text">
            <f:if condition="{topline -> vh:string.notEmpty()}">
                <h3 class="c-person__name">{topline -> f:format.raw()}</h3>
            </f:if>

            <f:if condition="{title -> vh:string.notEmpty()}">
                <p class="c-person__title">{title -> f:format.raw()}</p>
            </f:if>

            <f:if condition="{text -> vh:string.notEmpty()}">
                <p class="c-person__description c-neos-text">
                    <ts:render path="lib.convertUris" context="{ value: text }" />
                </p>
            </f:if>

            <f:if condition="{telephone} || {email}">
                <ul class="c-person__contact">
                    <f:if condition="{telephone -> vh:string.notEmpty()}">
                        <li>
                            <a href="tel:{telephone -> theme:format.phoneNumber()}">
                                <svg class="c-icon"
                                    aria-hidden="true"
                                    focusable="false">

                                    <use xlink:href="#icon-phone"/>
                                </svg>
                                {telephone}
                            </a>
                        </li>
                    </f:if>
                    <f:if condition="{email -> vh:string.notEmpty()}">
                        <li>
                            <a href="mailto:{email}">
                                <svg class="c-icon"
                                    aria-hidden="true"
                                    focusable="false">

                                    <use xlink:href="#icon-envelope"/>
                                </svg>
                                {email}
                            </a>
                        </li>
                    </f:if>
                </ul>
            </f:if>
                
        </figcaption>
    </figure>
</div>