{namespace color=MediateSystems\MsEvent\ViewHelpers}
{namespace v=FluidTYPO3\Vhs\ViewHelpers}


<div class="e01cardSection black-white" id="c{data.uid}">
    <div class="e01cardSection-wrapper">
        <div class="e01cardSection-inner-wrapper">
            <f:if condition="{data.header}">
                <div class="e01cardSection-header">
                    <h2>{data.header -> f:format.raw()}</h2>
                </div>
            </f:if>
            <div class="e01cardSection-cards-flexbox">
                <f:if condition="{data.tx_mask_e01_card_section_repeater}">
                    <f:for each="{data.tx_mask_e01_card_section_repeater}" as="data_item">
                        <v:condition.string.contains haystack="{data_item.tx_mask_e01_card_section_eventlink}" needle="ms_event" >
                            <f:then>
                                <f:link.action class="e01-card" action="show" controller="Event" pluginName="EventList" addQueryString="false" extensionName="MsEvent" pageUid="{data_item.event.pid}" arguments="{event: data_item.event.uid, date: data_item.event.real_date}">
                                    <f:render section="e1Inner" arguments="{data_item: data_item}"/>
                                </f:link.action>
                            </f:then>
                            <f:else>
                                <f:link.typolink class="e01-card" parameter="{data_item.tx_mask_e01_card_section_eventlink}">
                                    <f:render section="e1Inner" arguments="{data_item: data_item}"/>
                                </f:link.typolink>
                            </f:else>
                        </v:condition.string.contains>
                    </f:for>
                </f:if>
            </div>
        </div>
    </div>
</div>



<f:section name="e1Inner">
    <div class="e01cardSection-cards-content-wrapper event-card">
        <div class="event-card-inner hover">

            <f:if condition="{data_item.eventFormat} || {data_item.tx_mask_e01_card_section_tag}">
                <div class="e01cardSection-tag-wrapper">
                    <div class="e01cardSection-tag">
                        <div class="e01cardSection-tag-inner">
                            <p class="e01cardSection-tag-text">

                                <f:if condition="{data_item.tx_mask_e01_card_section_tag}">
                                    <f:then>
                                        {data_item.tx_mask_e01_card_section_tag}
                                    </f:then>
                                    <f:else>
                                        {f:if(condition: '{data_item.eventType}',then: '{data_item.eventType}',else: '{data_item.eventFormat}')}
                                    </f:else>
                                </f:if>
                            </p>
                        </div>
                    </div>
                </div>
            </f:if>


            <div class="e01cardSection-img-wrap">
                <f:if condition="{data_item.tx_mask_e01_card_section_image.0}">
                    <f:then>
                        <f:for each="{data_item.tx_mask_e01_card_section_image}" as="file">
                            <div class="e01cardSection-cards-content-img">
                                <f:media file="{file}" cropVariant="mask_e01_card_section" width="428c" height="343c"/>
                            </div>
                        </f:for>
                    </f:then>
                    <f:else>
                        <div class="e01cardSection-cards-content-img">
                            <img src="https://www.placehold.co/428x342.png?text={v:format.replace(content:'{data_item.tx_mask_e01_card_section_title}', substring:' ', replacement:'')}" width="428" height="342" alt="{data_item.tx_mask_e01_card_section_title}"
                                 title="{data_item.tx_mask_e01_card_section_title}">
                        </div>
                    </f:else>
                </f:if>
            </div>

            <div class="e01cardSection-text-wrap">
                <div class="event-card-header">

                    <div class="e01cardSection-title event-card-title">
                        <p>
                            <f:if condition="{data_item.tx_mask_e01_card_section_title}">
                                {data_item.tx_mask_e01_card_section_title}
                            </f:if>
                        </p>
                    </div>
                    <div class="e01cardSection-subtitle ">
                        <p>
                            <f:if condition="{data_item.tx_mask_e01_card_section_subtitle}">
                                {data_item.tx_mask_e01_card_section_subtitle}
                            </f:if>
                        </p>
                    </div>
                    <f:if condition="{data_item.tx_mask_e01_card_section_location}">
                        <f:then>
                            <div class="e01cardSection-location">
                                <p>
                                    {data_item.tx_mask_e01_card_section_location}
                                </p>
                            </div>
                        </f:then>
                        <f:else>
                            <f:if condition="{data_item.event.mainHouse.name}">
                                <div class="e01cardSection-location">
                                    <p>
                                        {data_item.event.mainHouse.name}
                                    </p>
                                </div>
                            </f:if>
                        </f:else>
                    </f:if>
                    <f:if condition="{data_item.tx_mask_e01_card_section_date}">
                        <div class="e01cardSection-date eventtime">
                            <p>
                                {data_item.tx_mask_e01_card_section_date}
                            </p>
                        </div>
                    </f:if>
                </div>
            </div>
        </div>
    </div>
</f:section>