{namespace neos=Neos\Neos\ViewHelpers}

<neos:contentElement.wrap node="{node}">
    <article class="c-magazine-page">
        <header class="c-magazine-page__header">
            <div class="o-container px-0" style="max-width: 100vw;">
                <div class="c-magazine-page__hero">
                    <f:if condition="{image}">
                        <f:render section="SingleImage" arguments="{_all}" />
                    </f:if>
                    <h1 class="c-magazine-page__title">{node.properties.title}</h1>
                    <f:if condition="{neos:rendering.inBackend()}">
                        <f:then>
                            {neos:contentElement.editable(property: 'subtitle', tag: 'p', class: 'c-magazine-page__subtitle')}
                        </f:then>
                        <f:else if="{subtitle}">
                            {neos:contentElement.editable(property: 'subtitle', tag: 'p', class: 'c-magazine-page__subtitle')}
                        </f:else>
                    </f:if>
                </div>
            </div>
            <div class="o-container o-container--xs">
                

                <f:if condition="{authors}">
                    <p class="c-magazine-page__authors c-neos-text">
                        von <f:for each="{authors}" as="author" iteration="authorIterator"><f:if condition="!{authorIterator.isFirst} && !{authorIterator.isLast}">, </f:if><f:if condition="{authorIterator.isLast} && !{authorIterator.isFirst}"> und </f:if><neos:link.node node="{author}">{author.properties.title}</neos:link.node></f:for>
                    </p>
                </f:if>

                <div class="c-magazine-page__date">{date}</div>

                {neos:contentElement.editable(property: 'intro', class: 'c-magazine-page__intro c-neos-text')}
            </div>
        </header>

        {mainContent -> f:format.raw()}

        <footer>
            <div class="o-container o-container--xs">
                <f:if condition="{authors}">
                    <ul class="c-magazine-page__footer-author-list">
                        <f:for each="{authors}" as="author" iteration="authorIterator">
                            <li class="c-magazine-page__footer-author">
                                <div class="c-magazine-page__footer-author-image">
                                    <noscript>
                                        <img
                                            src="{neos.media:uri.image(image: author.properties.image, width: 160, height: 160, allowCropping: true)}"
                                            width="160"
                                            height="160"
                                            alt="{author.properties.title}"
                                            loading="lazy" />
                                    </noscript>
                                    <img
                                        data-src="{neos.media:uri.image(image: author.properties.image, width: 160, height: 160, allowCropping: true)}"
                                        class="lazyload"
                                        width="160"
                                        height="160"
                                        alt="{author.properties.title}" />
                                </div>
                                <p class="c-neos-text">
                                    von <neos:link.node node="{author}">{author.properties.title}</neos:link.node>
                                </p>
                            </li>
                        </f:for>
                    </ul>
                </f:if>
                <div class="c-magazine-page__footer-share-wrapper">
                    <div class="c-magazine-page__footer-share">
                        <span>Diesen Bericht teilen</span>
                        <a class="c-button" href="http://www.facebook.com/sharer/sharer.php?u={neos:uri.node(absolute: true)}" target="_blank">
                            <svg class="c-icon">
                                <use xlink:href="#icon-facebook"></use>
                            </svg>
                        </a>
                        <a class="c-button" href="https://wa.me/?text={node.properties.title}%20{neos:uri.node(absolute: true)}" target="_blank">
                            <svg class="c-icon">
                                <use xlink:href="#icon-whatsapp"></use>
                            </svg>
                        </a>
                        <a class="c-button" href="mailto:?subject={node.properties.title}&body=%0D%0A{neos:uri.node(absolute: true)}">
                            <svg class="c-icon">
                                <use xlink:href="#icon-envelope"></use>
                            </svg>
                        </a>
                    </div>
                </div>
                <f:if condition="{tags}">
                    <nav class="c-magazine-page__footer-tag-list">
                        <f:for each="{tags}" as="tag">
                            <neos:link.node node="{tag}" class="c-magazine-page__footer-tag">{tag.properties.title}</neos:link.node>
                        </f:for>
                    </nav>
                </f:if>
            </div>
            <f:if condition="{hasInfoboxes} || {neos:rendering.inBackend()}">
                <div class="c-magazine-infobox-grid o-container mt-24">
                    <h2 class="c-magazine-infobox-grid__headline">
                        Mehr Informationen
                    </h2>
                    {infoboxes -> f:format.raw()}
                </div>
            </f:if>
        </footer>
    </article>

    <nav class="c-magazine-page-related">
        <div class="o-container">
            <div class="c-page-intro">
                <h2 class="c-page-intro__headline">Weitere spannende Geschichten</h2>
            </div>
            <ul class="o-grid o-grid--fourths mt-12">
                <f:for each="{relatedMagazinePages}" as="magazinePage">
                    <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>
                            <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:for>
            </ul>
            <p class="mt-8" style="text-align: center;">
                <neos:link.node node="node://ce322839-5adc-4280-9291-16e07ad26f29" class="c-button c-button--blue">
                    {linkedNode.label}
                </neos:link.node>
            </p>
        </div>
    </nav>
</neos:contentElement.wrap>

<f:section name="SingleImage">
    <f:render section="Image" arguments="{image: image, lazy: false}" />
</f:section>

<f:section name="Image">
    <noscript>
        <img
            src="{neos.media:uri.image(image: image, width: 1200, height: 600, allowCropping: true)}"
            srcset="{neos.media:uri.image(image: image, width: 1200, height: 600, allowCropping: true)} 1200w,
                    {neos.media:uri.image(image: image, width: 600, height: 300, allowCropping: true)} 600w"
            sizes="(max-width: 1200px) 100vw, 1200px"
            class="c-magazine-page__image"
            alt="{image.caption}"
            loading="{f:if(condition: lazy, then: 'lazy', else: 'eager')}" 
            {f:if(condition: focusPoint, then: "style='object-position: {focusPoint};'", else: '')}/>
    </noscript>
    <f:if condition="{lazy}">
        <f:then>
            <img
                data-src="{neos.media:uri.image(image: image, width: 1200, height: 600, allowCropping: true)}"
                data-srcset="{neos.media:uri.image(image: image, width: 1200, height: 600, allowCropping: true)} 1200w,
                             {neos.media:uri.image(image: image, width: 600, height: 300, allowCropping: true)} 600w"
                data-sizes="(max-width: 1200px) 100vw, 1200px"
                class="c-magazine-page__image lazyload"
                alt="{image.caption}" 
                {f:if(condition: focusPoint, then: "style='object-position: {focusPoint};'", else: '')}/>
        </f:then>
        <f:else>
            <img
                src="{neos.media:uri.image(image: image, width: 1200, height: 600, allowCropping: true)}"
                srcset="{neos.media:uri.image(image: image, width: 1200, height: 600, allowCropping: true)} 1200w,
                        {neos.media:uri.image(image: image, width: 600, height: 300, allowCropping: true)} 600w"
                sizes="(max-width: 1200px) 100vw, 1200px"
                class="c-magazine-page__image"
                alt="{image.caption}" 
                {f:if(condition: focusPoint, then: "style='object-position: {focusPoint};'", else: '')}/>
        </f:else>
    </f:if>
</f:section>