{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 {f:if(condition: imageShape, then: 'c-person--round-image')}">
        <f:if condition="{neos:rendering.inBackend()} || {image}">
            <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: '{nodesRoundEdges} && focusPoint && !{imageShape}', then: "style='border-radius: 10px; object-position: {focusPoint};'", else: '')}
                         {f:if(condition: focusPoint, then: "style='object-position: {focusPoint};'", else: '')}
                         {f:if(condition: '{nodesRoundEdges} && !{imageShape}', then: "style='border-radius: 10px;'", else: '')}>

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

        <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>
