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

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

                    <f:render section="icon-teaser-content" arguments="{_all}" />
                </a>
            </f:else>
        </f:if>
    </f:then>
    <f:else>
        <div class="c-icon-teaser {color} {f:if(condition: hideGridBorder, then: '', else: 'c-icon-teaser__border')}">
            <f:render section="icon-teaser-content" arguments="{_all}" />
        </div>
    </f:else>
</f:if>

<f:section name="icon-teaser-content">
    <div class="c-icon-teaser__content">
        <f:if condition="{icon}">
                <div class="c-icon-teaser__icon">
                    <f:if condition="{icon.mediaType} == 'image/svg+xml'">
                        <f:then>
                            {vh:media.inline(image: icon) -> f:format.raw()}
                        </f:then>
                        <f:else>
                            <img data-src="{neos.media:uri.image(image: icon, maximumWidth: 50)}" class="lazyload" />
                        </f:else>
                    </f:if>
                </div>
        </f:if>

        <f:if condition="{neos:rendering.inBackend()} || {title -> vh:string.notEmpty()}">
            {neos:contentElement.editable(property: 'title', tag: 'h3', class: 'c-icon-teaser__headline')}
        </f:if>

        <f:if condition="{neos:rendering.inBackend()} || {text -> vh:string.notEmpty()}">
            {neos:contentElement.editable(property: 'text', tag: 'p', class: 'c-icon-teaser__text')}
        </f:if>

        <div class="c-icon-teaser__arrow-wrapper">
            <svg class="c-icon-teaser__arrow c-icon c-icon--block" focusable="false">
                <use xlink:href="#icon-arrow-right" />
            </svg>
        </div>
    </div>
</f:section>