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

<div class="c-intro {color} {headlineColor} {headlineFontFamilyOverwrite}">
    <f:if condition="{customBorder} || {introIcon} && {headingType} != headingWithBackground">
        <f:if condition="{customBorder}">
            <f:then>
                <div class="c-intro__custom-border">
                    <f:if condition="{customBorder.mediaType} == 'image/svg+xml'">
                        <f:then>
                            {vh:media.inline(image: customBorder) -> f:format.raw()}
                        </f:then>
                        <f:else>
                            <noscript>
                                <img src="{neos.media:uri.image(image: customBorder)}" class="c-intro__custom-border--centered">
                            </noscript>
                            <img data-src="{neos.media:uri.image(image: customBorder)}" class="lazyload c-intro__custom-border--centered">
                        </f:else>
                    </f:if>
                </div>
            </f:then>
            <f:else>
                <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:else>
        </f:if>
    </f:if>

    <f:if condition="{headingType} == headingWithBackground">
        <f:then>
            <f:if condition="{renderHeadlineAsParagraph}">
                <f:then>
                    {neos:contentElement.editable(property: 'introTitle', class="c-intro__title c-intro__title--with-background {textTransform}", tag: 'p')}
                </f:then>
                <f:else>
                    {neos:contentElement.editable(property: 'introTitle', class="c-intro__title c-intro__title--with-background {textTransform}", tag: 'h2')}
                </f:else>
            </f:if>
        </f:then>
        <f:else>
            <f:if condition="{renderHeadlineAsParagraph}">
                <f:then>
                    {neos:contentElement.editable(property: 'introTitle', class="c-intro__title {textTransform}", tag: 'p')}
                </f:then>
                <f:else>
                    {neos:contentElement.editable(property: 'introTitle', class="c-intro__title {textTransform}", tag: 'h2')}
                </f:else>
            </f:if>
        </f:else>
    </f:if>
    
    <neos:contentElement.editable property="introText" class="c-intro__text c-neos-text {f:if(condition: introColor, then: 'c-intro__text--white')}" tag="p"/>
    
</div>
