ot_typo3/ot_widgets/Resources/Private/Templates/Event/Index.html

<f:layout name="Default" />

<f:section name="content">

    <div class="ot-all-events">

        <div class="events-controls">
            <div class="event-search">
                <h3>Rechercher un évènement: </h3>
                <f:form action="index">
                    <f:form.textfield name="search-loc" placeholder="Où?" value="{args.search-loc}"/>
                    <f:form.textfield name="search-name" placeholder="Quoi?" value="{args.search-name}" />
                    <f:form.textfield name="search-datestart" placeholder="Depuis le..." class="datepicker" value="{args.search-datestart}" />
                    <f:form.textfield name="search-dateend" placeholder="Jusqu'au..." class="datepicker" value="{args.search-dateend}" />
                    <f:form.button name="search-submit">Rechercher</f:form.button>
                </f:form>
            </div>
            <div id="event-map" data-records="">
                <f:for each="{allEvents}" as="event">
                    <f:if condition="{event.longitude}">
                        <f:then>
                            <i class="event-geodata" style="display: none;"
                               data-id="{event.id}"
                               data-long="{event.longitude}"
                               data-lat="{event.latitude}"
                               data-label="<b>{event.name}</b><br/>{event.locAndDate}">
                            </i>
                        </f:then>
                    </f:if>
                </f:for>
            </div>
        </div>

        <div class="events-results">
            <f:if condition="{allEvents -> f:count()} == 0">
                <span>Aucun résultat</span>
            </f:if>

            <f:for each="{allEvents}" 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_widgets/Resources/Public/assets/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.action action="show" arguments="{eventId: event.id}" class="event-see"><i class="fa fa-plus" style="margin-right: 5px;"></i><span>Plus d'infos</span></f:link.action>
                </div>
            </f:for>
        </div>
    </div>

</f:section>