<html
    xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
    data-namespace-typo3-fluid="true"
>

    <f:for each="{pagination.paginator.paginatedItems}" as="date" iteration="index">
        <div class="row mt-3 mb-3 pb-3">
            <div class="col-12 order-2 mb-3 mb-md-0 col-md-2 order-md-1">
                <f:if condition="{f:format.date(format: 'H:i', date: '{date.start}')} != '00:00'">
                    <b class="d-inline d-md-block"><f:format.date format="H.i">{date.start}</f:format.date></b>
                </f:if>
                <b class="d-inline d-md-block"><f:format.date format="%a">{date.start}</f:format.date></b>
                <b class="d-inline d-md-block"><f:format.date format="d.m.">{date.start}</f:format.date></b>
                {date.event.region.title}<br>
            </div>
            <div class="col-12 order-3 col-md-6 order-md-2">

                <f:if condition="{date.canceled} == 'canceled'">
                    <h4 class="bg-secondary text-white p-2">
                        <f:translate key="LLL:EXT:events/Resources/Private/Language/locallang.xlf:tx_events.date.canceled" />
                    </h4>
                </f:if>
                <h4>
                    <f:link.action pageUid="{settings.showPID}" action="show" controller="Date" arguments="{date: date}">
                        {date.event.title}
                    </f:link.action>
                </h4>
                <p><strong>{date.event.teaser}</strong></p>
                <f:format.crop maxCharacters="150">{date.event.details}</f:format.crop>
            </div>
            <div class="col-12 order-1 mb-3 mb-md-0 col-md-4 order-md-3 position-relative">
                <f:if condition="{date.event.images.0}">
                    <f:then>
                        <f:link.action pageUid="{settings.showPID}" action="show" controller="Date" arguments="{date: date}">
                            <f:image image="{date.event.images.0}" alt="" width="400c" height="280c" class="img-fluid img-thumbnail"/>
                        </f:link.action>
                    </f:then>
                    <f:else>
                        <f:link.action pageUid="{settings.showPID}" action="show" controller="Date" arguments="{date: date}">
                            <img src="{settings.defaultImagePath}" alt="Dummy" width="480c" height="320c" class="img-fluid img-thumbnail"/>
                        </f:link.action>
                    </f:else>
                </f:if>

            </div>
        </div>
        <f:if condition="{index.isLast}">
            <f:then>
            </f:then>
            <f:else>
                <div class="mb-3 border-bottom"></div>
            </f:else>
        </f:if>
    </f:for>

    {f:render(partial: 'Pagination', arguments: {
        pagination: pagination
    })}

</html>