{namespace v=FluidTYPO3\Vhs\ViewHelpers}
{namespace ot=Opentalent\OtTemplating\ViewHelpers}

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

<f:comment><!-- Get the events page' uid if the page is found --></f:comment>
<v:variable.set value="{ot:eventsPage.getId()}" name="eventsPageUid"/>
<v:variable.set value="{f:uri.image(src: 'EXT:ot_templating/Resources/Public/media/event-default-modern.jpg')}" name="defaultImage"/>

<f:comment><!-- Should we display the section even if there is no event to show?--></f:comment>
<f:if condition="{fromParents}||{fromChildren}">
    <f:then>
        <v:variable.set value="0" name="showEmpty"/>
    </f:then>
    <f:else>
        <v:variable.set value="1" name="showEmpty"/>
    </f:else>
</f:if>

<section class="mt-50 events">
    <div class="container">
        <div class="row">

            <ot:events.getNext as="events"
                               organizationId="{settings.organizationId}"
                               limit="{settings.eventsLimit}"
                               period="{settings.eventsPeriod}"
                               fromParents="{fromParents}"
                               fromChildren="{fromChildren}">

                <f:if condition="{events -> f:count()} > 0 || {showEmpty}">

                    <div class="col-lg-12 col-md-12">
                        <div class="text-center">
                            <f:if condition="{fromParents}">
                                <f:then>
                                    <h2 class="mb-50">Prochains événements de notre réseau</h2>
                                </f:then>
                                <f:else if="{fromChildren}">
                                    <h2 class="mb-50">Prochains événements de nos structures</h2>
                                </f:else>
                                <f:else>
                                    <h2 class="mb-50">Nos prochains évènements</h2>
                                </f:else>
                            </f:if>
                        </div>
                    </div>

                    <f:for each="{events}" as="event">

                        <div class="card-container col-lg-3 col-md-6 col-sm-12 sm-mb-30">
                            <div class="card border-0 theme-bg o-hidden h-100">

                                <f:if condition="{fromParents}||{fromChildren}">
                                    <f:then>
                                        <a href="https://{event.subDomain}.opentalent.fr" target="_blank">                                   >
                                    </f:then>
                                    <f:else>
                                        <a href="{f:uri.page(pageUid: eventsPageUid, additionalParams: '{eventId: event.id}')}">
                                    </f:else>
                                </f:if>
                                    <img class="img-fluid"
                                         src="{f:if(condition: event.image,
                                                    then: event.image,
                                                    else: defaultImage)}"/>
                                    <div class="p-4">
                                        <h4 class="text-white">{event.name}</h4>
                                        <p class="mb-0 pb-0 text-white">
                                            {f:format.date(date: event.datetimeStart,
                                            format: "\l\e d-m-Y \à H\hi")} - {event.city}
                                        </p>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </f:for>

                    <f:if condition="{eventsPageUid} > 0">
                        <div class="card-container col-lg-3 col-md-6 col-sm-12 sm-mb-30">
                            <div class="card border-0 theme-bg o-hidden h-100">
                                <f:link.page pageUid="{eventsPageUid}" class="p-4 more-events">
                                    <h2 class="text-white"> <i class="fa fa-plus fa-3x"></i> </h2>
                                    <h3 class="text-white"> Voir tous les évènements </h3>
                                </f:link.page>
                            </div>
                        </div>
                    </f:if>

                </f:if>

            </ot:events.getNext>

        </div>
    </div>
</section>