{namespace neos=Neos\Neos\ViewHelpers}
{namespace neos=Neos\Neos\ViewHelpers}
{namespace vh=Newland\NeosViewHelpers\ViewHelpers}

<div class="c-intro {color}">
    <f:if condition="{introIcon} && {headingType} != headingWithBackground">
        <div class="c-intro__icon{f:if(condition: '{headingType} == headingWithIconBorder', then: ' c-intro__icon--with-border')}">
            <f:if condition="{introIcon.mediaType} == 'image/svg+xml'">
                <f:then>
                    {vh:media.inline(image: introIcon) -> f:format.raw()}
                </f:then>
                <f:else>
                    <noscript>
                        <img src="{neos.media:uri.image(image: introIcon, maximumWidth: 64)}" class="c-intro__icon--centered"/>
                    </noscript>
                        <img data-src="{neos.media:uri.image(image: introIcon, maximumWidth: 64)}" class="lazyload c-intro__icon--centered" />
                </f:else>
            </f:if>
        </div>
    </f:if>

    <f:if condition="{headingType} == headingWithBackground">
        <f:then>
            {neos:contentElement.editable(property: 'introTitle', class: 'c-intro__title c-intro__title--with-background', tag: 'h2')}
        </f:then>
        <f:else>
            {neos:contentElement.editable(property: 'introTitle', class: 'c-intro__title', tag: 'h2')}
        </f:else>
    </f:if>

    {neos:contentElement.editable(property: 'introText', class: 'c-intro__text', tag: 'p')}
</div>