{namespace format=MediateSystems\MsEvent\ViewHelpers}

<div class="event-card" >
    <div class="event-card-inner hover" xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers">
        <f:link.action action="show" controller="Event" title="{f:translate(key: 'tx_msevent.showdetails')}" class="showEvent"
                       pluginName="EventList" addQueryString="false" extensionName="MsEvent" pageUid="{event.pid}"
                       arguments="{event : event.uid, date: event.real_date}">
            <div class="event-card-image">
                <f:comment>
                    <f:if condition="{format:eventFormat(type: '{event.type}')}">
                        <div class="format-wrapper">
                            <f:format.html>{format:eventFormat(type: '{event.type}')}</f:format.html>
                        </div>
                    </f:if>
                </f:comment>

                <!-- Bugs: Date Format, Uhrzeit und datum ausbelnden checkbox all to test-->
                <f:if condition="{tipp}">
                    <div class="format-wrapper">
                        <div class="event_tip_img">
                            <div class="formats">
                                <div class="format">
                                    <p>
                                        Tipp
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </f:if>

                <f:if condition="{event.image}">
                    <f:then>
                        <f:image image="{event.image}" width="305"></f:image>
                    </f:then>
                    <f:else>
                        <img src="https://www.placehold.co/305x205.png?text={v:format.replace(content:'{event.title}', substring:' ', replacement:'')}" width="305" alt="{event.title}"
                             title="{event.title}">
                    </f:else>
                </f:if>
            </div>
            <div class="event-card-header">
                <f:if condition="{event.title}">
                    <div class="event-card-title">
                        <p>{event.title}</p>
                    </div>
                </f:if>
                <f:if condition="{event.subtitle}">
                    <div class="event-card-subtitle">
                        <p>{event.subtitle}</p>
                    </div>
                </f:if>

                <f:if condition="{event.date}">
                    <f:then>
                        <div class="eventtime">
                            <p class="eventdate">
                                <f:if condition="{heute}">
                                    <f:then>
                                        <f:if condition="{event.additional_dates_sameday.0}">
                                            <f:then>
                                                <span class="eventhours">
                                                    <f:for each="{event.additional_dates_sameday}" as="times" iteration="cycle">
                                                        <f:if condition="{cycle.index} < 3" >
                                                            <f:then>
                                                               <f:if condition="{times.from_date} && {times.to_date}" >
                                                                    <f:then>
                                                                        {f:if(condition: '{cycle.isFirst}', then: '{event.date}, ')}
                                                                        {times.from_date -> f:format.date(format: 'H:i')}
                                                                        -
                                                                        {times.to_date -> f:format.date(format: 'H:i')}
                                                                        {f:if(condition: '{cycle.isLast} == FALSE && {cycle.index} < 2', then: ' ,')}
                                                                    </f:then>
                                                                    <f:else>
                                                                        {times.from_date -> f:format.date(format: 'H:i')}
                                                                    </f:else>
                                                                </f:if>
                                                            </f:then>
                                                        </f:if>
                                                        <f:if condition="{cycle.total} > 3 && {cycle.index}  == 3">
                                                            <f:then>
                                                                </br>
                                                                <strong class="more">weitere</strong>
                                                            </f:then>
                                                        </f:if>
                                                    </f:for>
                                                </span>
                                            </f:then>
                                            <f:else>
                                                <f:if condition="{event.from_time} != 0">
                                                    <f:then>
                                                         <span class="eventhours">{event.date}, {event.from_time} {f:if( condition: '{event.to_time}', then: '- {event.to_time}' )}</span>
                                                    </f:then>
                                                </f:if>
                                            </f:else>
                                        </f:if>
                                    </f:then>
                                    <f:else>
                                        {event.date}
                                    </f:else>
                                </f:if>
                            </p>
                        </div>
                    </f:then>
                    <f:else>
                        <f:if condition="{event.from_time} && {event.to_time} && {event.from_date}">
                            <div class="eventtime">
                                <p class="eventdate">
                                    <f:format.date format="d.m.">{event.from_date}</f:format.date>
                                </p>
                                <p class="eventhours">
                                    <f:format.date format="H:i">{event.from_time}</f:format.date>
                                    -
                                    <f:format.date format="H:i">{event.to_time}</f:format.date>
                                </p>
                            </div>
                        </f:if>
                    </f:else>
                </f:if>
            </div>
        </f:link.action>
    </div>
</div>