{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-variant {color}">
                    <f:render section="icon-teaser-variant-icon" arguments="{_all}" />
                </div>
                <f:render section="icon-teaser-variant-text" arguments="{_all}" />
            </f:then>
            <f:else>
                <a
                    href="{link}"
                    title="{linkTitle}"
                    class="c-icon-teaser-variant {color}"
                    {f:if(condition: openLinkInNewWindow, then: 'target="_blank" rel="noopener noreferrer"')}
                >

                    <f:render section="icon-teaser-variant-icon" arguments="{_all}" />
                </a>
                <f:render section="icon-teaser-variant-text" arguments="{_all}" />
            </f:else>
        </f:if>
    </f:then>
    <f:else>
        <div class="c-icon-teaser-variant {color}">
            <f:render section="icon-teaser-variant-icon" arguments="{_all}" />
        </div>
        <f:render section="icon-teaser-variant-text" arguments="{_all}" />
    </f:else>
</f:if>

<f:section name="icon-teaser-variant-icon">
    <div class="c-icon-teaser-variant__content">
        <f:if condition="{icon}">
            <div class="c-icon-teaser-variant__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="{alternativeText}"
                        >
                    </f:else>
                </f:if>
            </div>
        </f:if>
    </div>
</f:section>

<f:section name="icon-teaser-variant-text">
    <div class="c-icon-teaser-variant__text">
        <div class="c-icon-teaser-variant__arrow-wrapper">
            <svg class="c-icon-teaser-variant__arrow c-icon c-icon--block" focusable="false">
                <use xlink:href="#icon-arrow-right" />
            </svg>
        </div>
        <f:if condition="{neos:rendering.inBackend()} || {title -> vh:string.notEmpty()}">
            {neos:contentElement.editable(property: 'title', tag: 'h3', class: 'c-icon-teaser-variant__headline')}
        </f:if>
    </div>
</f:section>