{namespace ms=Mediatesystems\UmjSitepackage\ViewHelpers}
<div class="heromodulesub {f:if(condition: '!{data.tx_mask_use_primary_color}', then: 'standard-color')}  {f:if(condition: '{data.header}', else: 'nopadding')}"    id="c{data.uid}">
    <div class="heromodulesub-inner ">
        <!--TYPO3SEARCH_end-->
        <f:if condition="{f:cObject(typoscriptObjectPath: 'lib.rootline')} !=  '<p class=\"breadcrumb\"></p>'">
            <f:cObject typoscriptObjectPath="lib.rootline"/>
        </f:if>
        <!--TYPO3SEARCH_begin-->
        <div class="heromodulesub-inner">
            <f:if condition="{data.tx_mask_solid_brackground_hero_date_from} && {data.tx_mask_solid_brackground_hero_date_to}">
                <f:then>
                    <div class="heromodulesub-date">
                        <span class="btn btn-switcher">{data.tx_mask_solid_brackground_hero_date_from -> f:format.date(format: 'd.m')}. -  {data.tx_mask_solid_brackground_hero_date_to -> f:format.date(format: 'd.m.Y')}</span>
                    </div>
                </f:then>
                <f:else>
                    <f:if condition="{data.tx_mask_solid_brackground_hero_date_from} || {data.tx_mask_solid_brackground_hero_date_to}">
                        <div class="heromodulesub-date">
                             <span class="btn btn-switcher">
                                <f:if condition="{data.tx_mask_solid_brackground_hero_date_from}">
                                    {data.tx_mask_solid_brackground_hero_date_from -> f:format.date(format: 'd.m.Y')}
                                </f:if>
                                <f:if condition="{data.tx_mask_solid_brackground_hero_date_to}">
                                    {data.tx_mask_solid_brackground_hero_date_to -> f:format.date(format: 'd.m.Y')}
                                </f:if>
                             </span>
                        </div>
                    </f:if>
                </f:else>
            </f:if>

            <f:if condition="{data.header}">
                <div class="heromodulesub-title">
                    <h1>{data.header -> f:format.raw()}</h1>
                </div>
            </f:if>

            <f:if condition="{data.subheader}">
                <div class="line"></div>
                <div class="heromodulesub-subheader">
                    <h2>{data.subheader}</h2>
                </div>
                <div class="line"></div>
            </f:if>

            <f:if condition="{data.tx_mask_solid_background_hero_text}">
                <div class="heromodulesub-text text-content">
                    {data.tx_mask_solid_background_hero_text -> f:format.html()}
                </div>
            </f:if>

            <f:if condition="({data.tx_mask_primary_button_text_not_required}  && {f:link.typolink(parameter: '{data.tx_mask_primary_button_link_not_required}')}) || ({data.tx_mask_secondary_button_text_not_required} && {f:link.typolink(parameter: '{data.tx_mask_secondary_button_link_not_required}')})">
                <div class="heromodulesub-buttons-wrapper">
                    <f:if condition="{data.tx_mask_primary_button_text_not_required}  && {f:link.typolink(parameter: '{data.tx_mask_primary_button_link_not_required}')}">
                        <div class="heromodulesub-buttons">
                            <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>
                    <f:if condition="{data.tx_mask_secondary_button_text_not_required} && {f:link.typolink(parameter: '{data.tx_mask_secondary_button_link_not_required}')}">
                        <div class="heromodulesub-buttons">
                            <f:link.typolink class="btn btn-secondary border-gray" parameter="{data.tx_mask_secondary_button_link_not_required}">
                                {ms:button(type: 'text',text: data.tx_mask_secondary_button_text_not_required,direction:"right",border:0)}
                            </f:link.typolink>
                        </div>
                    </f:if>
                </div>
            </f:if>

            <f:if condition="{data.tx_mask_solid_brackground_hero_image}">
                <div class="heromodulesub-image">
                    <f:for each="{data.tx_mask_solid_brackground_hero_image}" as="file">
                        <ms:image class="hideMobile" image="{file}" cropVariant="mask_a02_solid_background_hero" width="1340"/>
                        <ms:image class="hideDesktop" image="{file}" cropVariant="mask_a02_solid_background_hero_mobile" width="450"/>
                        <ms:imageCredit uid="{file.properties.uid}" value="{f:translate(key: 'tx_umjsitepackage.imagecredits', extensionName: 'umj_sitepackage')}"/>
                    </f:for>
                </div>
            </f:if>
        </div>
    </div>
</div>