{namespace neos=Neos\Neos\ViewHelpers}

<neos:contentElement.wrap node="{node}">
    <div class="o-container">
        <h1 style="text-transform: uppercase; font-size: 1.5rem;" class="text-center spacing-top--sm">{node.properties.title}</h1>

        <f:render partial="LiveOverlay/MagazineTagButtons" arguments="{_all}" />

        <p class="c-teaser-card__heading">Neueste Berichte Zuerst</p>

        <ul class="o-grid o-grid--fourths spacing-top--sm">
            <f:for each="{magazinePages}" as="magazinePage">
                <f:for each="{magazinePage.properties.tags}" as="tag">
                    <f:if condition="{tag.identifier} === {node.identifier}">
                        <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"
                                        alt="{magazinePage.properties.title}"
                                        loading="lazy" />
                                </noscript>
                                <img data-src="{neos.media:uri.image(image: magazinePage.properties.image, width: 360, height: 240, allowCropping: true)}"
                                    class="c-teaser-card__image lazyload"
                                    alt="{magazinePage.properties.title}" />

                                <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:if>
                </f:for>
            </f:for>
        </ul>
    </div>
</neos:contentElement.wrap>

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