{namespace m=MASK\Mask\ViewHelpers}
<f:if condition="{data.tx_mask_box_text}">
    <div id="c{data.uid}" class="boxContainer matchHeight{f:if(condition: '{data.tx_mask_box_color} == 1', then: ' bgLightblue')}{f:if(condition: '{data.tx_mask_box_color} == 2', then: ' bgDarkblue')}{f:if(condition: '{data.tx_mask_box_color} == 3', then: ' bgYellow')}{f:if(condition: '{data.tx_mask_box_color} == 4', then: ' bg-light-gray')}">
        <f:if condition="{data.tx_mask_box_link}">
            <f:variable name="target">_self</f:variable>
            <v:condition.string.contains haystack="{data.tx_mask_box_link}" needle="_blank">
                <f:variable name="target">_blank</f:variable>
            </v:condition.string.contains>

            <a href="{f:uri.typolink(parameter: '{data.tx_mask_box_link}')}" target="{target}">
        </f:if>

        <f:if condition="{data.tx_mask_box_image}">
            <div class="boxImage">
                <f:for each="{data.tx_mask_box_image}" as="file">
                    <f:comment><f:image image="{file}" alt="{file.alternative}" title="{file.title}" width="768" /></f:comment>
                    <img src="{f:uri.image(src:file.uid, treatIdAsReference:1, width:'768px', cropVariant:'default')}" alt="{file.alternative}" title="{file.title}" />
                </f:for>
            </div>
        </f:if>

        <div class="boxCaption">
            <f:format.html parseFuncTSPath="lib.parseFunc_RTE">{data.tx_mask_box_text}</f:format.html>

            <f:if condition="{data.tx_mask_box_gated_uploads}">
                <f:for each="{data.tx_mask_box_gated_uploads}" as="tx_mask_box_gated_upload">
                    <m:Content uid="{tx_mask_box_gated_upload.uid}" />
                </f:for>
            </f:if>

            <f:format.html parseFuncTSPath="lib.parseFunc_RTE">{data.tx_mask_box_text1}</f:format.html>

        </div>

        <f:if condition="{data.tx_mask_box_link}">
            </a>
        </f:if>
    </div>
</f:if>