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


<f:section name="e02_download_section_single">
    <div class="e02_download_section_single {f:if(condition: '!{data.tx_mask_use_primary_color}', then: 'standard-color')}" id="c{data.uid}">
        <div class="e02_download_section_single_wrapper">
            <div class="e02_download_section_single_flexbox">
                <div class="e02_download_section_single_inner">
                    <div class="e02_download_section_single_align_box">
                        <f:if condition="{data.tx_mask_e02_download_section_single_teaser }">
                            <p class="e02_download_section_single_highlight">
                                {data.tx_mask_e02_download_section_single_teaser }
                            </p>
                        </f:if>
                        <f:if condition="{data.header}">
                            <div class="e02_download_section_single_title">
                                <h2>{data.header -> f:format.raw()}</h2>
                            </div>
                        </f:if>
                    </div>
                    <div class="e02_download_section_single_align_box_bottom">
                        <f:if condition="{data.tx_mask_e02_download_section_single_text}">
                            <div class="e02_download_section_single_text text-content">
                                {data.tx_mask_e02_download_section_single_text  -> f:format.html()}
                            </div>
                        </f:if>

                        <f:if condition="{data.tx_mask_primary_button_text_required}">
                            <f:if condition="{data.tx_mask_e02_download_section_item.0}">
                                <div class="e02_download_section_single_filesize">
                                    <p>{f:translate(key: 'tx_umjsitepackage.filesize', extensionName: 'umj_sitepackage')}: {data.tx_mask_e02_download_section_item.0.size -> f:format.bytes()}</p>
                                </div>
                                <div class="e02_download_section_single_buttons_wrapper">
                                    <f:if condition="{data.tx_mask_primary_button_text_required }">
                                        <div class="e02_download_section_single_button">
                                            <f:link.file class="btn btn-primary" download="true" file="{data.tx_mask_e02_download_section_item.0}">
                                                {ms:button(type: 'download',text: data.tx_mask_primary_button_text_required ,direction:'right',border:0)}
                                            </f:link.file>
                                        </div>
                                    </f:if>
                                </div>
                            </f:if>
                        </f:if>
                    </div>
                </div>
                <f:if condition="{data.tx_mask_e02_download_section_single_image}">
                    <div class="e02_download_section_single_inner">
                        <f:for each="{data.tx_mask_e02_download_section_single_image }" as="file">
                            <ms:image image="{file}" cropVariant="mask_e02_download_section_single" width="650px"/>
                            <ms:imageCredit uid="{file.properties.uid}" value="{f:translate(key: 'tx_umjsitepackage.imagecredits', extensionName: 'umj_sitepackage')}"/>
                        </f:for>
                    </div>
                </f:if>
            </div>
        </div>
    </div>
</f:section>