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

<neos:contentElement.wrap node="{node}">
    <article class="c-press-image">
        <div class="o-container">
            <f:if condition="{pressImage}">
                <figure class="c-press-image__wrapper {h1FontColor}">
                    <noscript>
                        <img src="{neos.media:uri.image(image: pressImage, maximumWidth: 700)}"
                             class="c-press-image__image"
                             alt="{alternativeText}"
                             loading="lazy" />

                    </noscript>
                    <img data-src="{neos.media:uri.image(image: pressImage, maximumWidth: 700)}"
                         class="c-press-image__image lazyload"
                         alt="{alternativeText}" />

                    <figcaption>
                        <h1 class="c-press-image__title">{pressImage.title}</h1>

                        <table class="c-press-image__meta">
                            <caption class="visually-hidden">Image Meta Data</caption>
                            <tbody>
                                <f:if condition="{pressImage.copyrightnotice}">
                                    <tr>
                                        <th>
                                            Copyright
                                        </th>
                                        <td>
                                            {pressImage.copyrightnotice}
                                        </td>
                                    </tr>
                                </f:if>
                                <tr>
                                    <th>
                                        {f:translate(id: 'size', source: 'NodeTypes/PressImage', package: 'Newland.CityTheme')}
                                    </th>
                                    <td>
                                        {pressImage.width}px x {pressImage.height}px ({pressImage.resource.fileSize -> f:format.bytes()})
                                    </td>
                                </tr>
                                <f:if condition="{neos:rendering.inBackend()}">
                                    <f:then>
                                        <tr>
                                            <th>
                                                {f:translate(id: 'location', source: 'NodeTypes/PressImage', package: 'Newland.CityTheme')}
                                            </th>
                                            <td>
                                                {neos:contentElement.editable(property: 'imageLocation', tag: 'span')}
                                            </td>
                                        </tr>
                                    </f:then>
                                    <f:else>
                                        <f:if condition="{node.properties.imageLocation} && {node.properties.imageLocation} != '&nbsp;'">
                                            <tr>
                                                <th>
                                                    {f:translate(id: 'location', source: 'NodeTypes/PressImage', package: 'Newland.CityTheme')}
                                                </th>
                                                <td>
                                                    {neos:contentElement.editable(property: 'imageLocation', tag: 'span')}
                                                </td>
                                            </tr>
                                        </f:if>
                                    </f:else>
                                </f:if>
                            </tbody>
                        </table>

                        {neos:contentElement.editable(property: 'imageIntro', tag: 'div', class: 'c-press-image__description c-neos-text mt-4')}
                        
                        <f:if condition="{termsOfServiceIntro}">
                            <h2 class="c-press-image__terms-headline">
                                {f:translate(id: 'termsofuse', source: 'NodeTypes/PressImage', package: 'Newland.CityTheme')}
                            </h2>
                            <div class="c-press-image__terms mb-4">
                                <p>
                                    {termsOfServiceIntro -> f:format.raw()}
                                </p>
                            </div>
                        </f:if>
                        
                        <f:if condition="{termsOfServiceFull}">
                            <button class="c-button--collapse-toggle mt-0"
                                    {f:if(condition: '{neos:rendering.inBackend()}', then: '', else: 'data-target-enhancement')}
                                    data-target-enhancement-targets.0="#c-collapsible-section-{node.identifier}"
                                    data-target-enhancement-class="is-not-collapsed"
                                    data-target-enhancement-plugins.0.name="toggle-aria-expanded"
                                    aria-expanded="{f:if(condition: '{neos:rendering.inBackend()}', then: 'true', else: 'false')}"
                                    aria-haspopup="true">

                                <span>
                                    {f:translate(id: 'readmore', source: 'NodeTypes/PressImage', package: 'Newland.CityTheme')}
                                    <svg class="c-icon c-icon--down"
                                            aria-hidden="true"
                                            focusable="false">

                                        <use xlink:href="#icon-angle-down" />
                                    </svg>
                                    <svg class="c-icon c-icon--up"
                                            aria-hidden="true"
                                            focusable="false">

                                        <use xlink:href="#icon-angle-up" />
                                    </svg>
                                </span>
                            </button>

                            <f:if condition="{neos:rendering.inBackend()}">
                                <f:else>
                                    <div id="c-collapsible-section-{node.identifier}" class="c-collapsible-section c-neos-text">
                                        <p class="mt-0">
                                            {termsOfServiceFull -> f:format.raw()}
                                        </p>
                                    </div>
                                </f:else>
                            </f:if>
                        </f:if>

                        <f:if condition="{termsOfServiceIntro} || {termsOfServiceFull}">
                            <div class="c-press-image__accept-terms mt-0">
                                <label for="accept-terms"
                                        class="c-press-image__label">
                                    {f:translate(id: 'agreetermsofuse', source: 'NodeTypes/PressImage', package: 'Newland.CityTheme')}
                                </label>
                                <input type="checkbox"
                                        id="accept-terms"
                                        name="accept-terms"
                                        class="c-press-image__checkbox" />

                                <a class="c-button c-button--soft-rounded c-press-image__download-link" href="{neos.media:uri.image(image: pressImage)}" download>
                                    {f:translate(id: 'downloadpicture', source: 'NodeTypes/PressImage', package: 'Newland.CityTheme')}
                                </a>
                            </div>
                        </f:if>
                    </figcaption>
                </figure>
            </f:if>
        </div>
    </article>
</neos:contentElement.wrap>