{namespace neos=Neos\Neos\ViewHelpers}

<neos:contentElement.wrap node="{node}">
    <div class="o-container o-container--xs">
        <div class="c-author-page__image mt-24">
            <img src="{neos.media:uri.image(image: image, width: 160, height: 160, allowCropping: true)}" width="160" height="160" alt="{node.properties.title}" />
        </div>

        <p class="c-author-page__title mt-4">{node.properties.title}</p>

        {neos:contentElement.editable(property: 'text', class: 'c-neos-text mt-6')}
    </div>
    <div class="o-container mt-24">
        <ul class="o-grid o-grid--fourths">
            <f:for each="{magazinePages}" as="magazinePage">
                <f:for each="{magazinePage.properties.authors}" as="author">
                    <f:if condition="{author.identifier} === {node.identifier}">
                        <li class="o-grid__item mb-10">
                            <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>
                                <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>
                            </neos:link.node>
                        </li>
                    </f:if>
                </f:for>
            </f:for>
        </ul>
    </div>
</neos:contentElement.wrap>

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