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

<f:section name="b02_teaserimage" >
    <div class="teasermodule teasermoduleb02 {f:if(condition: '!{data.tx_mask_use_primary_color}', then: 'standard-color')}" id="c{data.uid}">
        <div class="teasermodule-wrapper">
            <div class="teasermodule-flexbox">
                <div class="teasermodule-inner">
                    <div class="teasermodule-align-box">
                        <f:if condition="{data.tx_mask_b01b02_teaser_module_highlight_teaser}">
                            <p class="teasermodule-highlight">
                                {data.tx_mask_b01b02_teaser_module_highlight_teaser}
                            </p>
                        </f:if>
                        <f:if condition="{data.header}">
                            <div class="teasermodule-title">
                                <h2>{data.header -> f:format.raw()}</h2>
                            </div>
                        </f:if>
                        <f:if condition="{data.subheader}">
                            <div class="teasermodule-subheader">
                                <p>{data.subheader}</p>
                            </div>
                        </f:if>
                    </div>
                    <div class="teasermodule-b02">
                        <f:if condition="{data.tx_mask_b01b02_teaser_module_text}">
                            <div class="teasermodule-text text-content">
                                {data.tx_mask_b01b02_teaser_module_text -> f:format.html()}
                            </div>
                        </f:if>
                        <f:if condition="{data.tx_mask_primary_button_link_not_required}  && {f:link.typolink(parameter: '{data.tx_mask_primary_button_link_not_required}')}">
                            <div class="teasermodule-buttons-wrapper">
                                <f:if condition="{data.tx_mask_primary_button_text_not_required}">
                                    <div class="teasermodule-button">

                                        <f:link.typolink class="btn btn-primary" parameter="{data.tx_mask_primary_button_link_not_required}">
                                            {ms:button(type: 'text',text: data.tx_mask_primary_button_text_not_required,direction:'right',border:0)}
                                        </f:link.typolink>

                                    </div>
                                </f:if>
                            </div>
                        </f:if>
                    </div>
                </div>
                <f:if condition="{data.tx_mask_b01b02_teaser_module_image}">
                    <div class="teasermodule-inner  {f:if(condition: data.tx_mask_image_overlaybox_magnific, then:'use_magnific_popup')}">
                        <f:for each="{data.tx_mask_b01b02_teaser_module_image}" as="file">
                            <div class="b02-img-wrapper" style="{f:if(condition: data.tx_mask_scroll_image, then:'position: sticky; top: 30px;')}"  data-mfp-src="{f:uri.image(image: data.tx_mask_b01b02_teaser_module_image.0)}">
                                <ms:image image="{file}" cropVariant="mask_b02_teaser_module" width="650px"/>
                                <ms:imageCredit uid="{file.properties.uid}" value="{f:translate(key: 'tx_umjsitepackage.imagecredits', extensionName: 'umj_sitepackage')}"/>
                            </div>
                        </f:for>
                    </div>
                </f:if>
            </div>
        </div>
    </div>
</f:section>

<f:section name="b02_teaser_no_image">
    <div class="teasermodule_no_image {f:if(condition: '!{data.tx_mask_use_primary_color}', then: 'standard-color')}" id="c{data.uid}">
        <div class="teasermodule-wrapper">
        <div class="teasermodule-flexbox">

            <div class="teasermodule-inner">
                <f:if condition="{data.tx_mask_b01b02_teaser_module_highlight_teaser}">
                    <div class="teasermodule-highlight">
                        <p>
                            {data.tx_mask_b01b02_teaser_module_highlight_teaser}
                        </p>
                    </div>
                </f:if>

                <div class="teasermodule-align-box">
                    <f:if condition="{data.header}">
                        <div class="teasermodule-title">
                            <h3>{data.header}</h3>
                        </div>
                    </f:if>
                    <f:if condition="{data.tx_mask_b01b02_teaser_module_text}">
                        <div class="teasermodule-text text-content">
                            {data.tx_mask_b01b02_teaser_module_text -> f:format.html()}
                        </div>
                    </f:if>
                </div>
                <f:if condition="{data.tx_mask_primary_button_link_not_required} && {data.tx_mask_primary_button_text_not_required}">
                    <div class="teasermodule-b02">
                        <div class="teasermodule-buttons-wrapper">
                            <div class="teasermodule-button">
                                <f:link.typolink class="btn btn-primary" parameter="{data.tx_mask_primary_button_link_not_required}">
                                    {ms:button(type: 'text',text: data.tx_mask_primary_button_text_not_required,direction:'right',border:0)}
                                </f:link.typolink>
                            </div>
                        </div>
                    </div>
                </f:if>
            </div>
        </div>
    </div>
    </div>
</f:section>

<f:section name="b02_teaser">
    <f:if condition="{data.tx_mask_b01b02_teaser_module_image}">
        <f:then>
            <f:render section="b02_teaserimage" arguments="{data: data}"/>
        </f:then>
        <f:else>
            <f:render section="b02_teaser_no_image" arguments="{data: data}"/>
        </f:else>
    </f:if>
</f:section>

<f:section name="b01_teaser">
    <div class="teasermodule {f:if(condition: '!{data.tx_mask_use_primary_color}', then: 'standard-color')}" id="c{data.uid}">
        <div class="teasermodule-wrapper">
            <div class="teasermodule-flexbox">
                <div class="highlight_wrapper">
                    <f:if condition="{data.tx_mask_b01b02_teaser_module_highlight_teaser}">
                        <p class="teasermodule-highlight">
                            {data.tx_mask_b01b02_teaser_module_highlight_teaser}
                        </p>
                    </f:if>
                </div>
                <div class="teasermodule-inner">
                    <f:if condition="{data.header}">
                        <div class="teasermodule-title">
                            <h2>{data.header -> f:format.raw()}</h2>
                        </div>
                    </f:if>
                    <f:if condition="{data.subheader}">
                        <div class="line"></div>
                        <div class="teasermodule-subheader">
                            <p>{data.subheader}</p>
                        </div>
                        <div class="line"></div>
                    </f:if>
                </div>
                <div class="teasermodule-inner">
                    <f:if condition="{data.tx_mask_b01b02_teaser_module_text}">
                        <div class="teasermodule-text text-content">
                            {data.tx_mask_b01b02_teaser_module_text -> f:format.html()}
                        </div>
                    </f:if>
                    <f:if condition="{data.tx_mask_primary_button_link_not_required}">
                        <div class="teasermodule-buttons-wrapper">
                            <f:if condition="{data.tx_mask_primary_button_text_not_required}">
                                <div class="teasermodule-button">
                                    <f:link.typolink class="btn btn-primary" parameter="{data.tx_mask_primary_button_link_not_required}">
                                        {ms:button(type: 'text',text: data.tx_mask_primary_button_text_not_required,direction:'right',border:0)}
                                    </f:link.typolink>
                                </div>
                            </f:if>
                        </div>
                    </f:if>
                </div>
            </div>
            <f:if condition="{data.tx_mask_b01b02_teaser_module_image}">
                <div class="teasermodule-image-wrapper">
                    <f:for each="{data.tx_mask_b01b02_teaser_module_image}" as="file">
                        <ms:image image="{file}" cropVariant="mask_b01_b02_teaser_module" width="1440px"/>
                        <ms:imageCredit uid="{file.properties.uid}" value="{f:translate(key: 'tx_umjsitepackage.imagecredits', extensionName: 'umj_sitepackage')}"/>
                    </f:for>
                </div>
            </f:if>


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