{namespace neos=Neos\Neos\ViewHelpers}
{namespace fusion=Neos\Fusion\ViewHelpers}

<ul class="o-grid list-reset {marginTop}">
    <f:if condition="{articles}">
        <f:then>
            <f:for each="{articles}" as="article">
                <li class="o-grid__item o-grid__item--1/3 flex mt-0">
                    <neos:link.node class="tb-press-article-teaser" node="{article}">
                        <noscript>
                            <neos.media:image class="tb-press-article-teaser__image"
                                image="{article.properties.articleImage}"
                                alt="{article.properties.articleImage.title}"
                                maximumWidth="600"
                                additionalAttributes="{'loading': 'lazy'}" />
                        </noscript>
                        <img
                            data-src="{neos.media:uri.image(image: article.properties.articleImage, maximumWidth: 600)}"
                            alt="{article.properties.articleImage.title}"
                            class="tb-press-article-teaser__image lazyload"
                        >

                        <div class="tb-press-article-teaser__caption">
                            <f:if condition="{article.properties.articlePublishingDate} != '01.01.1970'">
                                <p class="tb-press-article-teaser__topline">
                                    <f:format.date forceLocale="{locale}" cldrFormat="{dateFormat}">{article.properties.articlePublishingDate}</f:format.date>
                                </p>
                            </f:if>
                            <h3 class="tb-press-article-teaser__title">
                                {article.properties.title}
                            </h3>
                            <p class="tb-press-article-teaser__intro">
                                {article.properties.articleIntro -> f:format.stripTags() -> f:format.htmlentitiesDecode()}
                            </p>
                        </div>
                    </neos:link.node>
                </li>
            </f:for>
        </f:then>
        <f:else>
            <f:if condition="{neos:rendering.inEditMode()}">
            <div{attributes -> f:format.raw()}>
                <p>No articles found</p>
            </div>
            </f:if>
        </f:else>
    </f:if>
</ul>