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

<neos:contentElement.wrap node="{node}">
    <div class="c-magazine-rootpage">

        <section class="o-container">
            <f:render partial="LiveOverlay/MagazineTagButtons" arguments="{_all}" />

            <f:if condition="{linkedMagazinePages}">
                <f:then>
                    <ul class="o-grid o-grid--fourths o-grid--centered spacing-top--md">
                        <f:for each="{linkedMagazinePages}" as="magazinePage" iteration="iterator">
                            <f:render section="magazinePageTeaser" arguments="{_all}" />
                        </f:for>
                    </ul>
                </f:then>
                <f:else>
                    <f:if condition="{neos:rendering.inEditMode()}">
                        <div{attributes -> f:format.raw()}>
                            <p>No MagazinePages found</p>
                        </div>
                    </f:if>
                </f:else>
            </f:if>
        </section>
    </div>

    <f:section name="magazinePageTeaser">
        <li class="o-grid__item">
            <neos:link.node node="{magazinePage}" class="c-teaser-card">
                <noscript>
                    <img src="{neos.media:uri.image(image: magazinePage.properties.image, width: 360, height: 240, allowCropping: true)}"
                        class="c-teaser-card__image"
                        sizes="360px, 240px"
                        alt="{magazinePage.properties.title}"
                        loading="lazy" />
                </noscript>
                <div class="c-teaser-card__tag">
                    <img data-src="{neos.media:uri.image(image: magazinePage.properties.image, width: 360, height: 240, allowCropping: true)}"
                        class="c-teaser-card__image lazyload"
                        sizes="360px, 240px"
                        alt="{magazinePage.properties.title}" />
                    <p class="c-tag">{magazinePage.properties.tags.0.properties.title}</p>
                </div>
                <p class="c-teaser-card__title">{magazinePage.properties.title}</p>
                <p class="c-teaser-card__text">{magazinePage.properties.subtitle}</p>
                <f:if condition="{magazinePage.properties.authors}">
                    <p class="c-teaser-card__footer">von <f:for each="{magazinePage.properties.authors}" as="author" iteration="authorIterator"><f:if condition="!{authorIterator.isFirst} && !{authorIterator.isLast}">, </f:if><f:if condition="{authorIterator.isLast} && !{authorIterator.isFirst}"> und </f:if><strong>{author.properties.title}</strong></f:for></p>
                </f:if>
            </neos:link.node>
        </li>
    </f:section>
</neos:contentElement.wrap>

<div class="o-container">
    {items -> f:format.raw()}
</div>