{namespace neos=Neos\Neos\ViewHelpers}

<f:if condition="{link}">
    <f:then>
        <f:if condition="{neos:rendering.inBackend()}">
            <f:then>
                <div class="c-notification" data-notification data-state="inactive">
                    <f:render section="notification" arguments="{_all}" />
                </div>
            </f:then>
            <f:else>
                <a href="{link}"
                   {f:if(condition: linkTitle, then: 'title="{linkTitle}"', else: '')}
                   {f:if(condition: openLinkInNewWindow, then: 'target="_blank"')}
                   class="c-notification"
                   data-notification data-state="inactive">

                    <f:render section="notification" arguments="{_all}" />
                </a>
            </f:else>
        </f:if>
    </f:then>
    <f:else>
        <div class="c-notification" data-notification data-state="inactive">
            <f:render section="notification" arguments="{_all}" />
        </div>
    </f:else>
</f:if>

<f:section name="notification">
    <div class="c-notification__container">
        <span class="c-notification__label">
            {title}
        </span>

        <span class="c-notification__text">
            {neos:contentElement.editable(property: 'content', tag: 'span')}

            <f:if condition="{link}">
                <svg class="c-icon ml-2"
                     aria-hidden="true"
                     focusable="false">

                    <use xlink:href="#icon-arrow-right"/>
                </svg>
            </f:if>
        </span>
    </div>
    <button data-notification-close>
        <svg class="c-icon c-notification__hide"
             aria-labelledby="notification-close-button-title"
             role="img">

            <title id="notification-close-button-title">Close</title>
            <use xlink:href="#icon-times"/>
        </svg>
    </button>
</f:section>