{namespace neos=Neos\Neos\ViewHelpers}
{namespace fusion=Neos\Fusion\ViewHelpers}

<section class="o-container {marginTop}" aria-labelledby="section-title-{node.identifier}">
    <span id="section-title-{node.identifier}" class="visually-hidden">{node.properties.title}</span>
    <div class="text-center">
        <h3>{node.properties.title}</h3>
    </div>

    <ul class="o-grid list-reset mt-8">
        <f:if condition="{pressImages}">
            <f:then>
                <f:if condition="{showAll}">
                    <f:then>
                        <f:comment>Show all PressImages</f:comment>
                        <f:for each="{pressImages}" as="pressImage">
                            <f:render section="pressImage" arguments="{_all}" />
                        </f:for>
                    </f:then>
                    <f:else>
                        <f:comment>Show the 3 latest PressImages</f:comment>
                        <f:for each="{pressImages}" as="pressImage" iteration="iterator">
                            <f:if condition="{iterator.cycle} <= 3">
                                <f:render section="pressImage" arguments="{_all}" />
                            </f:if>
                        </f:for>
                    </f:else>
                </f:if>
            </f:then>
            <f:else>
                <f:if condition="{neos:rendering.inEditMode()}">
                <div{attributes -> f:format.raw()}>
                    <p>No Press-Images found</p>
                </div>
                </f:if>
            </f:else>
        </f:if>
    </ul>
    <f:if condition="{showAll}">
        <f:else>
            <f:if condition="{link}">
                <div class="text-center mt-10">
                    <a href="{link}"
                       class="c-button c-button--soft-rounded"
                       {f:if(condition: openLinkInNewWindow, then: 'target="_blank" rel="noopener noreferrer"')}>

                        {f:translate(id: 'showmore', source: 'NodeTypes/PressImageList', package: 'Newland.CityTheme')}
                        <svg class="c-icon ml-2"
                             aria-hidden="true"
                             focusable="false">

                            <use xlink:href="#icon-arrow-right"/>
                        </svg>
                    </a>
                </div>
            </f:if>
        </f:else>
    </f:if>
</section>

<f:section name="pressImage">
    <li class="o-grid__item o-grid__item--1/3">
        <div class="c-standard-teaser">
            <neos:link.node node="{pressImage}" class="c-standard-teaser__link">
                <f:if condition="{pressImage.properties.image}">
                    <f:then>
                        <div class="c-standard-teaser__image-wrapper">
                            <noscript>
                                <img src="{neos.media:uri.image(image: pressImage.properties.image, maximumWidth: 600)}"
                                     alt="{pressImage.properties.image.caption}"
                                     loading="lazy">

                            </noscript>
                            <img data-src="{neos.media:uri.image(image: pressImage.properties.image, maximumWidth: 600)}"
                                 alt="{pressImage.properties.image.caption}"
                                 class="lazyload">
                        </div>
                    </f:then>
                </f:if>

                <div class="c-standard-teaser__content">
                    <h3 class="c-standard-teaser__title">
                        {pressImage.properties.image.title}
                    </h3>
                    <div class="c-standard-teaser__text">
                        <f:if condition="{pressImage.properties.image}">
                            <table class="c-press-image__meta">
                                <caption class="visually-hidden">Image Meta Data</caption>
                                <tbody>
                                    <f:if condition="{pressImage.properties.image.copyrightnotice}">
                                        <tr>
                                            <th>
                                                Copyright
                                            </th>
                                            <td>
                                                © {pressImage.properties.image.copyrightnotice}
                                            </td>
                                        </tr>
                                    </f:if>
                                    <tr>
                                        <th>
                                            {f:translate(id: 'size', source: 'NodeTypes/PressImageList', package: 'Newland.CityTheme')}
                                        </th>
                                        <td>
                                            {pressImage.properties.image.width}px x {pressImage.properties.image.height}px ({pressImage.properties.image.resource.fileSize -> f:format.bytes()})
                                        </td>
                                    </tr>
                                    <f:if condition="{pressImage.properties.imageLocation} && {pressImage.properties.imageLocation} != '&nbsp;'">
                                        <tr>
                                            <th>
                                                {f:translate(id: 'location', source: 'NodeTypes/PressImageList', package: 'Newland.CityTheme')}
                                            </th>
                                            <td>
                                                {pressImage.properties.imageLocation}
                                            </td>
                                        </tr>
                                    </f:if>
                                </tbody>
                            </table>
                        </f:if>
                        <span class="c-button c-button--soft-rounded">
                            {f:translate(id: 'todownload', source: 'NodeTypes/PressImageList', package: 'Newland.CityTheme')}
                        </span>
                    </div>
                </div>
            </neos:link.node>
        </div>
    </li>
</f:section>