{namespace ms=Mediatesystems\UmjSitepackage\ViewHelpers}
<f:render section="e04_inpage_download_section" arguments="{data: data}"/>


<f:section name="e04_inpage_download_section">
    <div class="e04_inpage_download_section black-white" id="c{data.uid}">
        <div class="e04_inpage_download_section_wrapper">
            <div class="e04_inpage_download_section_inner_wrapper">
                <f:if condition="{data.header}">
                    <div class="e04_inpage_download_section_header">
                        <h2>{data.header -> f:format.raw()}</h2>
                    </div>
                </f:if>
                <div class="e04_inpage_download_section_first_block">
                    <f:for each="{data.tx_mask_e04_inpagedownload_section_element}" as="data_item" iteration="iterator">
                        <!--<ms:icon type="expand_img" function="openMagnificPopupZoomIcon(this)"/>-->
                        <div class="e04_inpage_download_section_content_wrapper">
                            <div class="e04_inpage_download_section_content">
                                <f:if condition="{data_item.tx_mask_e04_inpagedownload_section_title}">
                                    <p class="e04_inpage_download_section_title">
                                        {data_item.tx_mask_e04_inpagedownload_section_title}</p>
                                </f:if>
                                <f:if condition="{data_item.tx_mask_e04_inpagedownload_section_subtitle}">
                                    <p class="subtitle">{data_item.tx_mask_e04_inpagedownload_section_subtitle}</p>
                                </f:if>
                            </div>
                            <f:if condition="{data_item.tx_mask_e04_inpagedownload_section_item.0}">
                                <div class="e04_inpage_download_section_preview  {f:if(condition: data_item.tx_mask_e04_image_overlaybox, then:'d06-gallerygrid-image')}"

                                         data-mfp-src="{f:uri.image(image: data_item.tx_mask_e04_inpagedownload_section_item.0, maxWidth: 1200)}"
                                         data-imageuid="{data_item.tx_mask_e04_inpagedownload_section_item.0.uid}"
                                         data-description="{data_item.tx_mask_e04_inpagedownload_section_item.0.properties.description -> f:format.htmlentities(encoding: 'UTF-8')}"
                                         data-title="{data_item.tx_mask_e04_inpagedownload_section_item.0.properties.title -> f:format.htmlentities(encoding: 'UTF-8')}"
                                         data-credits="{data_item.tx_mask_e04_inpagedownload_section_item.0.properties.image_credits -> f:format.htmlentities(encoding: 'UTF-8')}">
                                        <ms:image image="{data_item.tx_mask_e04_inpagedownload_section_item.0}" height="54"/>

                                </div>
                                <div class="e04_inpage_download_section_buttons">
                                    <div class="e04_inpage_download_section_download">
                                        <f:link.file file="{data_item.tx_mask_e04_inpagedownload_section_item.0}" additionalAttributes="{aria-label: '{data_item.tx_mask_e04_inpagedownload_section_title} Download Button'}"
                                                     class="e04_inpage_download_section_download-item" download="true">
                                            <svg width="20" height="18" viewBox="0 0 20 18" fill="none"
                                                 xmlns="http://www.w3.org/2000/svg">
                                                <path d="M7.35156 7.73438L10.4758 10.6867L13.6 7.73438" stroke="black"
                                                      stroke-width="1.125" stroke-linecap="square"
                                                      stroke-linejoin="round"/>
                                                <path d="M10.4766 2.8125V10.1229" stroke="black" stroke-width="1.125"
                                                      stroke-linecap="square" stroke-linejoin="round"/>
                                                <path d="M17.0216 10.6875V14.625C17.0216 14.7742 16.9589 14.9173 16.8473 15.0227C16.7357 15.1282 16.5844 15.1875 16.4265 15.1875H4.52478C4.36695 15.1875 4.21559 15.1282 4.10398 15.0227C3.99238 14.9173 3.92969 14.7742 3.92969 14.625V10.6875"
                                                      stroke="black" stroke-width="1.125" stroke-linecap="square"
                                                      stroke-linejoin="round"/>
                                            </svg>
                                        </f:link.file>
                                    </div>
                                </div>
                            </f:if>
                            <f:if condition="{data_item.tx_mask_e04_inpagedownload_section_primarylink} && {f:link.typolink(parameter: '{data_item.tx_mask_e04_inpagedownload_section_primarylink}')}">
                                <f:if condition="{data_item.tx_mask_e04_inpagedownload_section_primarytext}">
                                    <div class="heromodulesub-buttons">
                                        <f:link.typolink class="btn btn-primary"
                                                         parameter="{data_item.tx_mask_e04_inpagedownload_section_primarylink}">
                                            {ms:button(type: 'text',text:
                                            data_item.tx_mask_e04_inpagedownload_section_primarytext,direction:"right",border:0)}
                                        </f:link.typolink>
                                    </div>
                                </f:if>
                            </f:if>
                        </div>
                        <f:if condition="{iterator.isLast} == TRUE && {iterator.total} > 5">
                            <f:then>
                                <div class="e04_inpage_download_section_show_more">
                                    <ms:icon type="plus" data-show="5" function="extandShowMore(this, 'flex')"/>
                                </div>
                            </f:then>
                        </f:if>
                    </f:for>
                </div>
            </div>
        </div>
    </div>
</f:section>