{namespace neos=Neos\Neos\ViewHelpers}
{namespace fusion=Neos\Fusion\ViewHelpers}
{namespace components=Newland\NeosCommon\ViewHelpers}
{namespace vh=Newland\NeosViewHelpers\ViewHelpers}

<section class="o-container o-container--sm {marginTop}" aria-labelledby="section-title-{node.identifier}">
    <f:if condition="{node.properties.title}">
        <span id="section-title-{node.identifier}" class="visually-hidden">{node.properties.title}</span>

        <h2 class="c-press-article-list__heading">{node.properties.title}</h2>
    </f:if>

    <ul class="c-press-article-list">
        <f:if condition="{scope} == 'lastThree'">
            <f:then>
                <f:if condition="{articles}">
                    <f:then>
                        <f:for each="{articles}" as="article" iteration="iterator">
                            <f:if condition="{iterator.cycle} <= 3">
                                <li>
                                    <f:render section="article" arguments="{_all}" />
                                </li>
                            </f:if>
                        </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>
            </f:then>
            <f:else>
                <f:if condition="{articles}">
                    <f:then>
                        <f:for each="{articles}" as="article" iteration="iterator">
                            <f:if condition="{iterator.cycle} >= {minItems} && {iterator.cycle} <= {maxItems}">
                                <li>
                                    <f:render section="article" arguments="{_all}" />
                                </li>
                            </f:if>
                        </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>
            </f:else>
        </f:if>
    </ul>

    <f:if condition="{link}">
        <f:then>
            <div class="c-press-article__show-all-link">
                <a href="{link}"
                   class="c-button c-button--soft-rounded"
                   {f:if(condition: openLinkInNewWindow, then: 'target="_blank" rel="noopener"')}>

                    {f:translate(id: 'showmore', source: 'NodeTypes/PressArticleList', package: 'Newland.CityTheme')}
                </a>
            </div>
        </f:then>
        <f:else>
        </f:else>
    </f:if>

    <f:if condition="{scope} != 'lastThree'">
        <components:pagination
            currentPage="{currentPage}"
            totalPageCount="{totalPages}"
        />
    </f:if>
</section>

<f:section name="article">
    <article class="c-press-article-listitem">
        <f:if condition="{article.properties.articleImage}">
            <f:then>
                <neos:link.node class="c-press-article-listitem__image-link" node="{article}">
                    <noscript>
                        <img src="{neos.media:uri.image(image: article.properties.articleImage, maximumWidth: 700)}"
                             alt="{article.properties.articleImage.caption}"
                             class="c-article-teaser__image"
                             loading="lazy" />

                    </noscript>
                    <img data-src="{neos.media:uri.image(image: article.properties.articleImage, maximumWidth: 700)}"
                         alt="{article.properties.articleImage.caption}"
                         class="c-article-teaser__image lazyload" />

                    <f:if condition="{article.properties.articleImage.copyrightnotice -> vh:string.notEmpty()} && {showCopyrightOnImages}">
                        <div class="c-copyright__wrapper">
                            <div class="c-copyright">
                                © <span class="c-copyright__text">{article.properties.articleImage.copyrightnotice}</span>
                            </div>
                        </div>
                    </f:if>

                </neos:link.node>
            </f:then>
            <f:else>
                <neos:link.node class="c-press-article-listitem__image-placeholder" node="{article}">
                    <svg class="c-icon"
                         aria-labelledby="article-link-title-{node.identifier}"
                         focusable="false">

                        <title id="article-link-title-{node.identifier}">{article.properties.title -> f:format.raw()}</title>
                        <use xlink:href="#icon-press-image-placeholder" />
                    </svg>
                </neos:link.node>
            </f:else>
        </f:if>
        <div class="c-press-article-listitem__content">
            <header class="c-press-article-listitem__header">
                <time class="c-press-article-listitem__time">
                    <f:format.date forceLocale="{locale}" cldrFormat="{dateFormat}">{article.properties.articlePublishingDate}</f:format.date>
                </time>

                <h3 class="c-press-article-listitem__title">
                    <neos:link.node node="{article}">
                        {article.properties.title -> f:format.raw()}
                    </neos:link.node>
                </h3>
            </header>

            <section class="c-press-article-listitem__body">
                <div class="c-press-article-listitem__excerpt">
                    {article.properties.articleIntro -> f:format.raw()}
                </div>

                <neos:link.node class="c-press-article-listitem__read-more" node="{article}">
                    {f:translate(id: 'readmore', source: 'NodeTypes/PressArticleList', package: 'Newland.CityTheme')}
                </neos:link.node>
            </section>
        </div>
    </article>
</f:section>