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

<f:if condition="{neos:rendering.inBackend()}">
    <f:then>
        <div class="c-fact-teaser {color}">
            <f:render section="factTeaserContent"></f:render>
        </div>
    </f:then>
    <f:else>
        <f:if condition="{link}">
            <f:then>
                <a href="{link}"
                   class="c-fact-teaser {color}"
                   {f:if(condition: openLinkInNewWindow, then: 'target="_blank" rel="noopener noreferrer"')}>
                   <f:render section="factTeaserContent"></f:render>
                </a>
            </f:then>
            <f:else>
                <div class="c-fact-teaser {color}">
                    <f:render section="factTeaserContent"></f:render>
                </div>
            </f:else>
        </f:if>
    </f:else>
</f:if>

<f:section name="factTeaserContent">
    <f:if condition="{icon}">
        <div class="c-fact-teaser__icon">
            {vh:media.inline(image: icon) -> f:format.raw()}
        </div>
    </f:if>

    <f:if condition="{neos:rendering.inBackend()}">
        <f:then>
            {neos:contentElement.editable(property: 'title', class: 'c-fact-teaser__title', tag: 'h3')}
            {neos:contentElement.editable(property: 'text', class: 'c-fact-teaser__text', tag: 'p')}
        </f:then>
        <f:else>
            <f:if condition="{title -> vh:string.notEmpty()}">
                    {neos:contentElement.editable(property: 'title', class: 'c-fact-teaser__title', tag: 'h3')}
            </f:if>
            <f:if condition="{text -> vh:string.notEmpty()}">
                {neos:contentElement.editable(property: 'text', class: 'c-fact-teaser__text', tag: 'p')}
            </f:if>
        </f:else>
    </f:if>
</f:section>