<f:comment>
    This partial is responsible for rendering the press image teaser on the article page.
</f:comment>

<f:if condition="{articlePressImages}">
    <ul class="c-press-image-list">
        <f:for each="{articlePressImages}" as="reference">
            <li>
                <figure class="c-press-image-preview">
                    <neos:link.node class="c-press-image-preview__image-link" node="{reference}">
                        <noscript>
                            <img src="{neos.media:uri.image(image: reference.properties.image, maximumWidth: 500)}"
                                 class="c-press-image-preview__image"
                                 alt="{reference.properties.image.caption}"
                                 loading="lazy"
                            >
                        </noscript>

                        <img data-src="{neos.media:uri.image(image: reference.properties.image, maximumWidth: 500)}"
                             class="c-press-image-preview__image lazyload"
                             alt="{reference.properties.image.caption}"
                        >

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

                    </neos:link.node>
                    <figcaption>
                        <h3 class="c-press-image-preview__title">
                            <neos:link.node node="{reference}">
                                {reference.properties.image.title}
                            </neos:link.node>
                        </h3>

                        <table class="c-press-image-preview__meta">
                            <caption class="visually-hidden">Image Meta Data</caption>
                            <tbody>
                                <f:if condition="{reference.properties.image.copyrightnotice}">
                                    <tr>
                                        <th>
                                            Copyright
                                        </th>
                                        <td>
                                            © {reference.properties.image.copyrightnotice}
                                        </td>
                                    </tr>
                                </f:if>
                                <tr>
                                    <th>
                                        {f:translate(id: 'size', source: 'NodeTypes/PressImagePreviews', package: 'Newland.CityTheme')}
                                    </th>
                                    <td>
                                        {reference.properties.image.width}px x {reference.properties.image.height}px ({reference.properties.image.resource.fileSize -> f:format.bytes()})
                                    </td>
                                </tr>
                                <f:if condition="{reference.properties.imageLocation} && {reference.properties.imageLocation} != '&nbsp;'">
                                    <tr>
                                        <th>
                                            {f:translate(id: 'location', source: 'NodeTypes/PressImagePreviews', package: 'Newland.CityTheme')}
                                        </th>
                                        <td>
                                            {reference.properties.imageLocation}
                                        </td>
                                    </tr>
                                </f:if>
                            </tbody>
                        </table>

                        <div class="c-press-image-preview__description mb-4">
                            {reference.properties.imageIntro -> f:format.raw()}
                        </div>

                        <neos:link.node class="c-button c-button--soft-rounded" node="{reference}">
                            {f:translate(id: 'todownload', source: 'NodeTypes/PressImagePreviews', package: 'Newland.CityTheme')}
                        </neos:link.node>
                    </figcaption>
                </figure>
            </li>
        </f:for>
    </ul>
</f:if>
