{namespace ms=Mediatesystems\UmjSitepackage\ViewHelpers}
<f:if  condition="{data.tx_mask_choose_between_box_or_event} == event">
    <f:then>
        <f:render section="event-newswletter" arguments="{data: data}" />
    </f:then>
    <f:else>
        <f:render section="image-left-right-newswletter" arguments="{data: data}" />
    </f:else>
</f:if>



<f:section name="image-left-right-newswletter">
    <tr><td>
        <table class="image-left-right-newswletter {f:if(condition: '!{data.tx_mask_use_primary_color}', then: 'standard-color')}"  id="c{data.uid}">
            <tbody>
            <tr><td height="20" class="px-spacer-20"></td></tr>
            <tr>
                <td class="image-left-right-newswletter-wrapper">
                    <table>
                        <tbody>
                        <tr>
                            <td height="20" class="px-spacer-20"></td>
                            <td class="image-left-right-newswletter-conetnt">
                                <table>
                                    <tbody>
                                    <tr>
                                        <f:if condition="{data.imageorient} == 26 && {data.tx_mask_b01b02_teaser_module_image.0}">
                                            <td class="image">
                                                <f:for each="{data.tx_mask_b01b02_teaser_module_image}" as="file">
                                                    <f:link.typolink absolute="1" parameter="{data.tx_mask_f06_f07_f08_f09_text_blocks_link}">
                                                        <f:image image="{file}" cropVariant="mask_newsletter_left_right" width="210" absolute="1" />
                                                    </f:link.typolink>
                                                </f:for>
                                            </td>
                                            <!--[if !mso]>-->
                                            <td class="image-mobile" style="display: none">
                                                <f:for each="{data.tx_mask_b01b02_teaser_module_image}" as="file">
                                                    <f:link.typolink absolute="1" parameter="{data.tx_mask_f06_f07_f08_f09_text_blocks_link}">
                                                        <f:image image="{file}" cropVariant="mask_newsletter_left_right" width="600" absolute="1" />
                                                    </f:link.typolink>
                                                </f:for>
                                            </td>
                                            <!--<![endif]-->
                                            <td height="20" class="px-spacer-20"></td>
                                        </f:if>
                                        <td class="text-content">
                                            <table>
                                                <tbody>
                                                <f:if condition="{data.header}">
                                                    <tr>
                                                        <td class="header">
                                                            <p>{data.header}</p>

                                                        </td>
                                                    </tr>
                                                </f:if>
                                                <f:if condition="{data.subheader}">
                                                    <tr class="px-spacer-5"><td height="5"></td></tr>
                                                    <tr>
                                                        <td class="subheader">
                                                            <p>{data.subheader}</p>
                                                        </td>
                                                    </tr>
                                                </f:if>
                                                <f:if condition="{data.bodytext}">
                                                    <tr class="px-spacer-5"><td height="5"></td></tr>
                                                    <tr>
                                                        <td class="main-text">
                                                            {data.bodytext -> f:format.html()}
                                                        </td>
                                                    </tr>
                                                </f:if>
                                                <f:if condition="{data.tx_mask_f06_f07_f08_f09_text_blocks_link_text} && {data.tx_mask_f06_f07_f08_f09_text_blocks_link}">
                                                    <tr class="px-spacer-15"><td height="15"></td></tr>
                                                    <tr>
                                                        <td class="link">
                                                            <f:link.typolink absolute="1" parameter="{data.tx_mask_f06_f07_f08_f09_text_blocks_link}">
                                                                {data.tx_mask_f06_f07_f08_f09_text_blocks_link_text}
                                                            </f:link.typolink>
                                                        </td>
                                                    </tr>
                                                </f:if>
                                                </tbody>
                                            </table>
                                        </td>
                                        <f:if condition="{data.imageorient} == 25 && {data.tx_mask_b01b02_teaser_module_image.0}">
                                            <td height="20" class="px-spacer-20"></td>
                                            <td class="image">
                                                <f:for each="{data.tx_mask_b01b02_teaser_module_image}" as="file">
                                                    <f:link.typolink absolute="1" parameter="{data.tx_mask_f06_f07_f08_f09_text_blocks_link}">
                                                        <f:image image="{file}" cropVariant="mask_newsletter_left_right" width="210" absolute="1" />
                                                    </f:link.typolink>
                                                </f:for>
                                            </td>
                                            <!--[if !mso]>-->
                                            <td class="image-mobile" style="display: none">
                                                <f:for each="{data.tx_mask_b01b02_teaser_module_image}" as="file">
                                                    <f:link.typolink absolute="1" parameter="{data.tx_mask_f06_f07_f08_f09_text_blocks_link}">
                                                        <f:image image="{file}" cropVariant="mask_newsletter_left_right" width="600" absolute="1" />
                                                    </f:link.typolink>
                                                </f:for>
                                            </td>
                                            <!--<![endif]-->
                                        </f:if>
                                    </tr>
                                    </tbody>
                                </table>
                            </td>
                            <td height="20" class="px-spacer-20"></td>
                        </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
            <tr><td><table><tr><td height="20" class="px-spacer-20"></td><td height="20" class="{f:if(condition: '{data.tx_mask_bottom_line}',then:'border-bottom-1px-gray')}"></td><td height="20" class="px-spacer-20"></td></tr></table></td></tr>
            </tbody>
        </table>
    </td></tr>
</f:section>


<f:section name="event-newswletter">
    <f:comment>Css for this section in eventBox.scss</f:comment>
    <tr><td>
        <table class="newsletter-event black-white" id="c{data.uid}">
            <f:if condition="{data.header}">
                <tr class="px-spacer-20"><td height="20"></td></tr>
                <tr>
                    <td>
                        <table class="newsletter-event-header">
                            <tr>
                                <td class="px-spacer-20"></td>
                                <td>
                                    <p>{data.header}</p>
                                </td>
                                <td class="px-spacer-20"></td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <f:if condition="{data.subheader}">
                    <f:then>
                        <tr class="px-spacer-10"><td height="10"></td></tr>
                    </f:then>
                    <f:else>
                        <tr class="px-spacer-20"><td height="20"></td></tr>
                    </f:else>
                </f:if>
            </f:if>
            <f:if condition="{data.subheader}">
                <tr>
                    <td>
                        <table class="newsletter-event-subheader">
                            <tr>
                                <td class="px-spacer-20"></td>
                                <td>
                                    <p>{data.subheader}</p>
                                </td>
                                <td class="px-spacer-20"></td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr class="px-spacer-20"><td height="20"></td></tr>
            </f:if>
            <f:for each="{data.tx_mask_event_links_items}" as="event" iteration="cycle">
                <f:variable name="event_link" value="{f:uri.action(action: 'show', controller: 'Event', pluginName: 'EventList', addQueryString: 'false', extensionName: 'MsEvent' , pageUid: '{event.pid}', arguments: '{event: event.uid, date: event.real_date}' )}" />
                <tr class="px-spacer-20"><td height="20"></td></tr>
                <tr class="newsletter-event-event-row">
                    <td>
                        <table class="event">
                            <tr>
                                <td class="px-spacer-20"></td>
                                <td class="event-time tr-mobile">
                                    <table>
                                        <tr>
                                            <td class="event-date">
                                                <f:if condition="{event.format} != 4">
                                                    <f:then>
                                                        <f:if condition="!{event.show_date}">
                                                            <v:condition.string.contains haystack="{event.date}" needle="-" >
                                                                <f:then>
                                                                    <p>{event.date}</p>
                                                                </f:then>
                                                                <f:else>
                                                                    <p><f:format.date date="{event.date}" format="d.m.Y">{event.from_time}</f:format.date></p>
                                                                </f:else>
                                                            </v:condition.string.contains>
                                                        </f:if>
                                                    </f:then>
                                                    <f:else>
                                                        &nbsp;
                                                    </f:else>
                                                </f:if>
                                            </td>
                                        </tr>

                                        <f:if condition="{event.format} != 4">
                                            <f:then>
                                                <f:if condition="!{event.show_date}">
                                                    <tr>
                                                        <td class="event-time">
                                                            <f:if condition="{event.additional_dates_sameday}">
                                                                <f:then>
                                                                    <f:if condition="{event.additional_dates_sameday} != false && {f:count(subject: event.additional_dates_sameday)} == 1">
                                                                        <f:then>
                                                                            <f:if condition="{event.additional_dates_sameday.0.from_date}">
                                                                                <p>
                                                                                    <f:format.date format="H:i">{event.additional_dates_sameday.0.from_date}</f:format.date>
                                                                                    <f:if condition="{event.additional_dates_sameday.0.to_date}">
                                                                                        - <f:format.date format="H:i">{event.additional_dates_sameday.0.to_date}</f:format.date>
                                                                                    </f:if>
                                                                                </p>
                                                                            </f:if>
                                                                        </f:then>
                                                                        <f:else>
                                                                            <f:if condition="{event.from_time}">
                                                                                <p>
                                                                                    {event.from_time}
                                                                                    <f:if condition="{event.to_time}">
                                                                                        - {event.to_time}
                                                                                    </f:if>
                                                                                </p>

                                                                            </f:if>
                                                                        </f:else>
                                                                    </f:if>
                                                                </f:then>
                                                                <f:else>
                                                                    <f:if condition="{event.from_time}">
                                                                        <p>
                                                                            {event.from_time}
                                                                            <f:if condition="{event.to_time}">
                                                                                - {event.to_time}
                                                                            </f:if>
                                                                        </p>
                                                                    </f:if>
                                                                </f:else>
                                                            </f:if>

                                                        </td>
                                                    </tr>
                                                </f:if>
                                            </f:then>
                                            <f:else>
                                                &nbsp;
                                            </f:else>
                                        </f:if>
                                    </table>
                                </td>
                                <td height="20" class="px-spacer-20 tr-mobile"></td>
                                <!--[if !mso]>-->
                                <td class="event-image-mobile tr-mobile">
                                    <f:if condition="{event.image}">
                                        <f:then>
                                            <f:image image="{event.image}" absolute="1" cropVariant="default" width="600" class="mobile-image"/>
                                        </f:then>
                                        <f:else>
                                            <img src="https://www.placehold.co/600x395.png?text={event.title}" width="600" alt="{event.title}"
                                                 title="{event.title}">
                                        </f:else>
                                    </f:if>
                                </td>
                                <!--<![endif]-->
                                <td height="20" class="event-image-desktop tr-mobile">
                                    <f:if condition="{event.image}">
                                        <f:then>
                                            <f:image image="{event.image}" absolute="1" cropVariant="default" width="160" class="desktop-image"/>
                                        </f:then>
                                        <f:else>
                                            <img src="https://www.placehold.co/164x108.png?text={event.title}" width="160" alt="{event.title}"
                                                 title="{event.title}">
                                        </f:else>
                                    </f:if>
                                </td>
                                <td height="20" class="px-spacer-20 tr-mobile"></td>
                                <td class="event-info tr-mobile">
                                    <table>
                                        <tr>
                                            <td class="event-house">
                                                <p>{event.mainHouse.name}</p>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="event-title">
                                                <p>{event.title}</p>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="event-subtitle">
                                                <p>{event.subtitle}</p>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="event-link">
                                                <f:link.typolink absolute="1"  parameter="{event_link}">{f:translate(key: 'tx_msevent_domain_model_house.showmore', extensionName: 'ms_event')}</f:link.typolink>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                                <td class="px-spacer-20"></td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr><td><table><tr><td height="20" class="px-spacer-20"></td><td height="20" class="{f:if(condition: '!{cycle.isLast}',then:'border-bottom-1px-gray')}"></td><td height="20" class="px-spacer-20"></td></tr></table></td></tr>
            </f:for>
        </table>
    </td></tr>
</f:section>