ot_typo3/ot_templating/Resources/Private/Partials/Modern/EventsIndex.html

{namespace ot=Opentalent\OtTemplating\ViewHelpers}

<f:comment><!-- All events --></f:comment>

<div class="ot-all-events">
    <div class="events-controls">
        <div class="event-search">
            <h3>Rechercher un évènement: </h3>
            <form>
                <input type="text"
                       name="search-loc"
                       placeholder="{f:translate(key: 'where')}?"
                       value="{ot:request.getArgument(argument: 'search-loc')}"/>
                <input type="text"
                       name="search-name"
                       placeholder="{f:translate(key: 'what')}?"
                       value="{ot:request.getArgument(argument: 'search-name')}" />
                <input type="text"
                       name="search-datestart"
                       placeholder="{f:translate(key: 'since')}..."
                       class="datepicker datetimepicker"
                       value="{ot:request.getArgument(argument: 'search-datestart')}" />
                <input type="text"
                       name="search-dateend"
                       placeholder="{f:translate(key: 'until')}..."
                       class="datepicker datetimepicker"
                       value="{ot:request.getArgument(argument: 'search-dateend')}" />

                <f:comment><!--
                Important: if the cache is not disabled,
                 then the results won't be updated even after submitting this form
                 --></f:comment>
                <input type="hidden"
                       name="no_cache"
                       value="1">

                <button name="search-submit"><f:translate key="search"/></button>
            </form>
        </div>

        <div id="event-map" data-records="">
            <f:for each="{eventsCollection.members}" as="event">
                <f:if condition="{event.longitude}">
                    <f:then>
                        <i class="item-geodata" style="display: none;"
                           data-id="{event.id}"
                           data-long="{event.longitude}"
                           data-lat="{event.latitude}"
                           data-label="<b>{event.name}</b><br/>{event.streetAdress}">
                        </i>
                    </f:then>
                </f:if>
            </f:for>
        </div>
    </div>

    <div class="events-results">
        <f:if condition="{eventsCollection.totalItems} == 0">
            <span><f:translate key="no-result"/></span>
        </f:if>

        <f:for each="{eventsCollection.members}" as="event">
            <div class="event" data-id="{event.id}">
                <div class="event-preview">

                    <div class="event-poster">
                        <f:if condition="{event.image}">
                            <f:then>
                                <img src='{event.image}' alt="poster" />
                            </f:then>
                            <f:else>
                                <f:image src="EXT:ot_templating/Resources/Public/media/event-default.jpg" alt="poster" />
                            </f:else>
                        </f:if>
                    </div>

                    <div class="event-summary">
                <span class="event-name">
                    {event.name}
                </span>
                        <span class="event-loc-date">
                    {event.locAndDate}
                </span>
                        <span class="event-description">
                    {event.shortDescription}
                </span>
                    </div>
                </div>

                <f:link.page class="event-see"
                             additionalParams="{eventId: event.id}">
                    <i class="fa fa-plus" style="margin-right: 5px;"></i>
                    <span><f:translate key="more-informations"/></span>
                </f:link.page>
            </div>
        </f:for>

        {ot:pagination(collection: eventsCollection)}
    </div>
</div>