{namespace neos=Neos\Neos\ViewHelpers}
{namespace theme=Newland\CityTheme\ViewHelpers}
{namespace vh=Newland\NeosViewHelpers\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">
            <neos:contentElement.editable property="topline" class="c-person__name" tag="h3" />
            <neos:contentElement.editable property="title" class="c-person__title" tag="p" />

            <neos:contentElement.editable property="text" tag="p" class="c-person__description c-neos-text" />

            <f:if condition="{neos:rendering.inBackend()}">
                <f:then>
                    <ul class="c-person__contact">
                        <li>
                            <span>
                                <svg class="c-icon"
                                     aria-hidden="true"
                                     focusable="false">

                                    <use xlink:href="#icon-phone"/>
                                </svg>
                                {neos:contentElement.editable(property: 'telephone', tag: 'span')}
                            </span>
                        </li>
                        <li>
                            <span>
                                <svg class="c-icon"
                                     aria-hidden="true"
                                     focusable="false">

                                    <use xlink:href="#icon-envelope"/>
                                </svg>
                                {neos:contentElement.editable(property: 'email', tag: 'span')}
                            </span>
                        </li>
                    </ul>
                </f:then>
                <f:else>
                    <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>
                </f:else>
            </f:if>
        </figcaption>
    </figure>
</div>