{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}"
                    title="{linkTitle}"
                    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"
                            alt=""
                        >
                    </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>
