{namespace neos=Neos\Neos\ViewHelpers}

<neos:contentElement.wrap node="{node}">
    <article class="c-press-article">
        <div class="o-container o-container--sm">
            <header class="c-press-article__header c-page-intro">
                <h1 class="c-press-article__title c-neos-text">{node.properties.title}</h1>
                <time class="c-press-article__published">
                    <f:format.date forceLocale="{locale}" cldrFormat="{dateFormat}">{node.properties.articlePublishingDate}</f:format.date>
                </time>
            </header>

            {neos:contentElement.editable(property: 'articleIntro', class: 'c-press-article__intro c-neos-text')}

            <f:if condition="{articleImage}">
                <figure class="c-image mt-6">
                    <noscript>
                        <img src="{neos.media:uri.image(image: articleImage)}"
                             srcset="{neos.media:uri.image(image: articleImage, maximumWidth: 752)} 752w,
                                     {neos.media:uri.image(image: articleImage, maximumWidth: 420)} 420w"
                             sizes="(max-width: 752px) 100vw, 752px"
                             alt="{alternativeText}"
                             loading="lazy" />

                    </noscript>
                    <img data-src="{neos.media:uri.image(image: articleImage)}"
                         data-srcset="{neos.media:uri.image(image: articleImage, maximumWidth: 752)} 752w,
                                      {neos.media:uri.image(image: articleImage, maximumWidth: 420)} 420w"
                         data-sizes="(max-width: 752px) 100vw, 752px"
                         class="lazyload"
                         alt="{alternativeText}" />

                    <figcaption class="c-image__caption">
                        {articleImageCaption}
                    </figcaption>
                </figure>
            </f:if>

            {neos:contentElement.editable(property: 'articleBody', class: 'c-press-article__body mt-6 c-neos-text')}

            <f:if condition="{articlePressContacts}">
                <f:then>
                    <h3 class="mt-16">{f:translate(id: 'presscontact', source: 'NodeTypes/PressArticle', package: 'Newland.CityTheme')}</h3>
                    <div class="mt-4">
                        <f:for each="{articlePressContacts}" as="contact">
                            <f:render partial="Person" arguments="{image: contact.properties.image, topline: contact.properties.topline, title: contact.properties.title, text: contact.properties.text, email: contact.properties.email, telephone: contact.properties.telephone}" />
                        </f:for>
                    </div>
                </f:then>
                <f:else>
                    <f:if condition="{neos:rendering.inBackend()}">
                        <p class="mt-8">No contacts selected.</p>
                    </f:if>
                </f:else>
            </f:if>

            <f:if condition="{articlePressDownloads}">
                <div class="mt-16">
                    <h3>Downloads</h3>
                    <ul class="c-asset-list mt-4">
                        <f:for each="{articlePressDownloads}" as="asset">
                            <li class="c-asset-list__item c-asset">
                                <svg
                                    class="c-icon c-asset__icon"
                                    aria-hidden="true">
                                    <use xlink:href="#icon-download"></use>
                                </svg>
                                <div class="c-asset__text">
                                    <a class="c-asset__name" href="{f:uri.resource(resource: asset.resource)}" download target="_blank">
                                        {f:if(condition: asset.title, then: asset.title, else: asset.resource.filename)}
                                    </a>
                                    <span class="c-asset__meta">
                                        ({asset.resource.fileExtension} - {asset.resource.fileSize -> f:format.bytes()})
                                    </span>
                                </div>
                            </li>
                        </f:for>
                    </ul>
                </div>
            </f:if>

            <f:if condition="{articlePressImages}">
                <f:then>
                    <div class="mt-16">
                        <f:render partial="PressImagePreviews" arguments="{_all}" />
                    </div>
                </f:then>
            </f:if>
        </div>
    </article>
</neos:contentElement.wrap>