{namespace ms=Mediatesystems\UmjSitepackage\ViewHelpers}
<f:render section="d07-image-grid-swipeable-popup" arguments="{data: data}"/>


<f:section name="d07-image-grid-swipeable-popup">
    <div class="d07-image-grid-swipeable-popup black-white" id="c{data.uid}" data-per-page="{data.tx_mask_images_per_page}" data-height-per-image="{f:if(condition: '{data.imageheight}',then: '{data.imageheight}',else: '250')}" data-show-download="{f:if(condition: '{data.tx_mask_download_button}',then: 'true',else: 'false')}">
        <div class="d07-image-grid-inner">
            <f:if condition="{data.header} || {data.tx_mask_d06_media_embeds_description}">
                <div class="d07-image-grid-header">
                    <f:if condition="{data.header}">
                        <div class="d07-image-grid-title">
                            <p>{data.header -> f:format.raw()}</p>
                        </div>
                    </f:if>
                    <f:if condition="{data.tx_mask_d06_media_embeds_description}">
                        <div class="d07-image-grid-description text-content">
                            {data.tx_mask_d06_media_embeds_description -> f:format.raw()}
                        </div>
                    </f:if>
                </div>
            </f:if>
            <f:if condition="{data.tx_mask_d07_image}">
                <f:then>
                    <div class="d07-image-grid-wrapper">
                        <f:if condition="{data.tx_mask_use_crop}">
                            <f:then>
                                <div class="d07-gallerygrid cropped" data-container-record="{data.uid}" style="grid-template-columns: repeat(auto-fill, minmax({data.imageheight}px, 1fr));">

                                </div>
                            </f:then>
                            <f:else>
                                <div class="d07-galleryflex no-crop" data-container-record="{data.uid}">

                                </div>
                            </f:else>
                        </f:if>
                    </div>
                </f:then>
            </f:if>
        </div>
    </div>
</f:section>

<f:comment>

    <f:section name="image_without_crop">
        <f:for as="image" each="{data.tx_mask_d07_image}">
            <div class="image_flex_wrapper use_magnific_popup_slider"
                 data-mfp-src="{f:uri.image(image: image, maxWidth: 1200)}"
                 data-imageuid="{image.uid}"
                 data-description="{image.properties.description -> f:format.htmlentities(encoding: 'UTF-8')}"
                 data-title="{image.properties.title -> f:format.htmlentities(encoding: 'UTF-8')}"
                 data-credits="{image.properties.image_credits -> f:format.htmlentities(encoding: 'UTF-8')}"
            >
                <ms:image image="{image}" height="{f:if(condition: '{data.imageheight}',then: '{data.imageheight}',else: '200')}"></ms:image>
            </div>
        </f:for>
    </f:section>
    <f:section name="image_with_crop">
        <f:for as="image" each="{data.tx_mask_d07_image}">
            <div class="image_grid_wrapper use_magnific_popup_slider"
                 data-mfp-src="{f:uri.image(image: image, maxWidth: 1200)}"
                 data-imageuid="{image.uid}"
                 data-description="{image.properties.description -> f:format.htmlentities(encoding: 'UTF-8')}"
                 data-title="{image.properties.title -> f:format.htmlentities(encoding: 'UTF-8')}"
                 data-credits="{image.properties.image_credits -> f:format.htmlentities(encoding: 'UTF-8')}"
            >
                <ms:image image="{image}" cropVariant="mask_d07_image_grid_magnific_slide" ></ms:image>
            </div>
        </f:for>
    </f:section>




</f:comment>