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

<f:layout name="Default" />

<f:section name="content">

    <f:comment><!-- Get the events page' uid if the page is found --></f:comment>
    <v:variable.set value="{ot:eventsPage.getId()}" name="eventsPageUid"/>

    <div class="ot-box ot-events">
        <div class="events-list">
            <header>
                <h3>Nos prochains évènements</h3>
            </header>

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

                <div class="event-card">

                    <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-date">
                            {f:format.date(date: event.datetimeStart,
                                           format: "\l\e d-m-Y \à H\hi")}
                        </span>
                        <f:if condition="{eventsPageUid} > 0"><f:then>
                            <span class="event-see">
                                <f:link.action pageUid="{eventsPageUid}" action="show" arguments="{eventId: event.id}">
                                    Plus d'infos
                                </f:link.action>
                            </span>
                        </f:then></f:if>
                    </div>

                </div>
            </f:for>

            <f:if condition="{events -> f:count()} == 0">
                <f:then>
                    <span class="no-events"><p>Aucun évènement dans les prochaines semaines</p></span>
                </f:then>
            </f:if>

            <footer>
                <f:if condition="{eventsPageUid} > 0"><f:then>
                    <div class="event-see-all">
                        <f:link.page pageUid="{eventsPageUid}">
                            Voir tous les évènements
                        </f:link.page>
                    </div>
                </f:then></f:if>
            </footer>
        </div>

        <v:condition.variable.isset name="networkEvents">
            <div class="events-list">
                <header>
                    <h3>Prochains événements de notre réseau</h3>
                </header>

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

                    <div class="event-card">

                        <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-date">
                                {f:format.date(date: event.datetimeStart,
                                               format: "\l\e d-m-Y \à H\hi")}
                            </span>
                            <span class="event-see">
                                <a href="https://{event.subDomain}.opentalent.fr" target="_blank">Plus d'infos</a>
                            </span>
                        </div>

                    </div>
                </f:for>

                <f:if condition="{networkEvents -> f:count()} == 0">
                    <f:then>
                        <span class="no-events"><p>Aucun évènement dans les prochaines semaines</p></span>
                    </f:then>
                </f:if>

            </div>
        </v:condition.variable.isset>

        <v:condition.variable.isset name="structuresEvents">
            <div class="events-list">
                <header>
                    <h3>Prochains événements de nos structures</h3>
                </header>

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

                    <div class="event-card">

                        <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-date">
                                {f:format.date(date: event.datetimeStart,
                                               format: "\l\e d-m-Y \à H\hi")}
                            </span>
                            <span class="event-see">
                                <a href="https://{event.subDomain}.opentalent.fr" target="_blank">Plus d'infos</a>
                            </span>
                        </div>

                    </div>
                </f:for>

                <f:if condition="{structuresEvents -> f:count()} == 0">
                    <f:then>
                        <span class="no-events"><p>Aucun évènement dans les prochaines semaines</p></span>
                    </f:then>
                </f:if>

            </div>
        </v:condition.variable.isset>
    </div>
</f:section>