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


<f:section name="e03_multiple_download_section">
    <div class="e03_multiple_download_section black-white" id="c{data.uid}">
        <div class="e03_multiple_download_section_wrapper">
            <div class="e03_multiple_download_section_inner_wrapper">
                <f:if condition="{data.header}">
                    <div class="e03_multiple_download_section_header">
                        <h2>{data.header -> f:format.raw()}</h2>
                    </div>
                </f:if>
                <div class="e03_multiple_download_section_first_block">
                    <f:for each="{data.tx_mask_e03_multiple_download_files}" as="file" iteration="iterator">

                        <div class="e03_multiple_download_section_content_wrapper">
                            <div class="e03_multiple_download_section_content">
                                <f:if condition="{file.title}">
                                    <p class="e03_multiple_download_section_title">
                                        {file.title}</p>
                                </f:if>
                                <f:if condition="{file.properties.image_credits}">
                                    <p class="subtitle">{file.properties.image_credits}</p>
                                </f:if>
                            </div>

                            <f:if condition="{file}">
                                <div class="e03_multiple_download_section_preview  {f:if(condition: '{file.properties.tx_umj_sitepackage_e03_file_popup_button} || {data.image_zoom}', then:'d06-gallerygrid-image')}"

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

                                </div>
                                <div class="e03_multiple_download_section_buttons">
                                    <div class="e03_multiple_download_section_download">
                                        <f:link.file file="{file}"
                                                     class="e03_multiple_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="{file.properties.tx_umj_sitepackage_e03_file_primary_button_text} && {f:link.typolink(parameter: '{file.properties.tx_umj_sitepackage_e03_file_primary_button}')}">
                                <f:if condition="{file.properties.tx_umj_sitepackage_e03_file_primary_button_text}">
                                    <div class="heromodulesub-buttons">
                                        <f:link.typolink class="btn btn-primary"
                                                         parameter="{file.properties.tx_umj_sitepackage_e03_file_primary_button}">
                                            {ms:button(type: 'text',text:
                                            file.properties.tx_umj_sitepackage_e03_file_primary_button_text,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="e03_multiple_download_section_show_more {f:if(condition: '{data.tx_mask_override_plus_button_text}', then: 'btn-primary')}">
                                    <f:if condition="{data.tx_mask_override_plus_button_text}">
                                        <f:then>
                                                <ms:icon type="plus_with_text" data-show="5" function="extandShowMore(this, 'flex')" text="{data.tx_mask_override_plus_button_text}"/>
                                        </f:then>
                                        <f:else>
                                            <ms:icon type="plus" data-show="5" function="extandShowMore(this, 'flex')"/>
                                        </f:else>
                                    </f:if>
                                </div>
                            </f:then>
                        </f:if>



                    </f:for>

                </div>
            </div>
        </div>
    </div>
</f:section>