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

<div class="c-infobox__container">
    <div class="c-infobox {infoboxColor} {buttonType}">
        <f:if condition="{showIcon}">
            <div class="c-infobox__icon-container">
                <f:if condition="{customIcon}">
                    <f:then>
                        <f:if condition="{customIcon.mediaType} == 'image/svg+xml'">
                            <f:then>
                                {vh:media.inline(image: customIcon, class: 'c-icon') -> f:format.raw()}
                            </f:then>
                            <f:else>
                                <img data-src="{neos.media:uri.image(image: customIcon, maximumWidth: 50)}" class="c-icon lazyload">
                            </f:else>
                        </f:if>
                    </f:then>
                    <f:else>
                        <svg class="c-icon" viewBox="-21 -7 55 55">
                            <path d="M162.632,7.132a3.632,3.632,0,1,1,1.816,3.145A3.632,3.632,0,0,1,162.632,7.132ZM159,18.027a2.419,2.419,0,0,1,2.421-2.421h4.842a2.419,2.419,0,0,1,2.421,2.421V34.976h2.421a2.421,2.421,0,0,1,0,4.842h-9.685a2.421,2.421,0,1,1,0-4.842h2.421V20.449h-2.421A2.419,2.419,0,0,1,159,18.027Z" transform="translate(-159 -3.5)"/>
                        </svg>
                    </f:else>
                </f:if>
            </div>
        </f:if>
        <f:render section="infobox-content" arguments="{_all}"></f:render>
    </div>
</div>

<f:section name="infobox-content">
    <f:if condition="{neos:rendering.inBackend()}">
        <f:then>
            <div class="c-infobox__content">
                {neos:contentElement.editable(property: 'infoboxHeadline', class: 'c-infobox__headline', tag: 'h3')}
                {neos:contentElement.editable(property: 'text', class: 'c-neos-text')}

                <f:if condition="{showButton}">
                    <div class="c-infobox__button c-button {buttonType}">
                        {linkTitle}
                    </div>
                </f:if>
            </div>
        </f:then>
        <f:else>
            <div class="c-infobox__content">
                <f:if condition="{infoboxHeadline -> vh:string.notEmpty()}">
                    {neos:contentElement.editable(property: 'infoboxHeadline', class: 'c-infobox__headline', tag: 'h3')}
                </f:if>

                <f:if condition="{text -> vh:string.notEmpty()}">
                    <div class="c-infobox__text">
                        {neos:contentElement.editable(property: 'text', class: 'c-neos-text')}
                    </div>
                </f:if>
                <f:if condition="{showButton}">
                    <f:if condition="{link}">
                        <a
                            href="{link}"
                            title="{linkTitle}"
                            {f:if(condition: openLinkInNewWindow, then: 'target="_blank" rel="noopener noreferrer"')}"
                            class="c-infobox__button c-button {buttonType}"
                        >
                            {linkTitle}
                        </a>
                    </f:if>
                </f:if>
            </div>
        </f:else>
    </f:if>
</f:section>