{% block titre_agenda %}
    <div class="bloc-titre-agenda">
        {% if not ez_is_field_empty( rootContent, 'agenda_intitule_accueil' ) %}
            <h2 class="h2-theme-2"> {{ ez_render_field(rootContent, 'agenda_intitule_accueil')|raw }}</h2>
        {% endif %}
        {% if not ez_is_field_empty( rootContent, 'agenda_intitule_accueil_2_ligne' ) %}
            <h3 class="h3-theme-2"> {{ ez_render_field(rootContent, 'agenda_intitule_accueil_2_ligne')|raw }}</h3>
        {% endif %}
    </div>
{% endblock %}
<div class="agenda-2-wrap">
    {% if rootRetourEnImageId and rootContent.fields.agenda_intitule_retour_en_image is defined and not ez_is_field_empty( rootContent, 'agenda_intitule_retour_en_image' ) %}
        <div class="bloc-image-link">
            <a href="{{ path( 'ez_urlalias', {'locationId': rootRetourEnImageId } ) }}" title="retour en images">
                <div class="image-wrap">
                    <img src="bundles/ayalinecollectivite/images/svg/retour-image.svg" alt="Retour en images">
                </div>
                <div class="link-wrap">
                    {% if not ez_is_field_empty( rootContent, 'agenda_intitule_retour_en_image' ) %}
                        <span class="link-title">{{ ez_render_field(rootContent, 'agenda_intitule_retour_en_image')|raw }}</span>
                    {% else %}
                        <span class="link-title">Retour en <span>images</span></span>
                    {% endif %}
                    <span class="icon-plus"></span>
                </div>
            </a>
        </div>
    {% endif %}
    <div class="agenda-2">
        {% if filterBar %}
            <div class="outils-agenda-2">
                <form method="post" action="/">
                    <div class="col-outil">
                        <a href="{{ path( 'ez_urlalias', {'locationId': rootAgendaId } ) }}"
                           title="Filtrer les événements de l'agenda" class="filter-btn">
                            <span class="icon-filter"><img src="bundles/ayalinecollectivite/images/svg/filter.svg"
                                                           alt="Filtrer les événements de l'agenda"></span>Filtrer
                        </a>
                    </div>
                    <div class="col-outil">
                        <label for="date-agenda">À partir de</label>
                        <div class="date-agenda-wrap">
                            <input class="" name="date-agenda" id="date-agenda" data-date-format="DD/MM/YYYY"
                                   placeholder="{{ dateStart }}" value="{{ dateStart }}">
                            <span class="icon-date"><img src="bundles/ayalinecollectivite/images/svg/picto-date.svg"
                                                         alt="À partir de"></span>
                        </div>
                    </div>
                </form>
            </div>
        {% endif %}
        <div class="agenda-2-in" id="mea-agenda">
            {% if eventsList|length %}
                <div class="inner-agenda">
                    <div class="in-agenda swiper-container swiper-container-horizontal scrollbar-macosx">
                        <div class="inner-inner-agenda swiper-wrapper">
                            {% set last_id = '' %}
                            {% for day,events in eventsList %}
                                {% for event in events %}
                                    {% if event.id != last_id %}
                                        {% set url = path( 'ez_urlalias', {'locationId': event.contentInfo.mainLocationId } ) %}
                                        <article class="swiper-slide">
                                            <a href="{{ url }}" title="{{ ez_field_value(event, 'titre')|escape }}">
                                                <div class="bloc-date">
                                                    {% if event.fields.date_debut is defined and not ez_is_field_empty( event, "date_debut" ) %}
                                                        <div>
                                                            <strong class="date">
                                                                <span class="day">{{ ez_field_value(event, "date_debut")|localizeddate('none', 'none', app.request.locale, null, "dd") }}</span>
                                                                <span class="month">{{ ez_field_value(event, "date_debut")|localizeddate('none', 'none', app.request.locale, null, "MMM") }}</span>
                                                            </strong>
                                                        </div>
                                                    {% endif %}
                                                    {% if event.fields.date_debut is defined and not ez_is_field_empty( event, "date_debut" ) and event.fields.date_fin is defined and not ez_is_field_empty( event, "date_fin" ) and event.getFieldValue('date_debut').date != event.getFieldValue('date_fin').date %}
                                                        <div>
                                                            <strong class="date">
                                                                <span class="day">{{ ez_field_value(event, "date_fin")|localizeddate('none', 'none', app.request.locale, null, "dd") }}</span>
                                                                <span class="month">{{ ez_field_value(event, "date_fin")|localizeddate('none', 'none', app.request.locale, null, "MMM") }}</span>
                                                            </strong>
                                                        </div>
                                                    {% endif %}
                                                </div>
                                                <div class="inner-article">
                                                    <div class="description-event">
                                                        <div class="sous_titre_event">{{ ez_render_field(event, 'thematiques') }}</div>
                                                        <h3 class="event_name">{{ ez_render_field(event, 'titre') }}</h3>
                                                        <div class="resume_event">
                                                            {% if event.getFieldValue( 'resume' ).text %}
                                                                {{ ez_render_field( event, "resume", { 'template': 'AyalineEzAgendaCollectivitesBundle:fields:event_eztext.html.twig', 'parameters':{ 'truncate': charLimit } } ) }}
                                                            {% else %}
                                                                {{ ez_render_field( event, "description", { 'template': 'AyalineEzAgendaCollectivitesBundle:fields:event_ezxmltext.html.twig', 'parameters':{ 'truncate': charLimit } } ) }}
                                                            {% endif %}
                                                        </div>
                                                        {#<div class="commune_event">Lounge bar<br>Carnac thalasso et spa resort<br>Avenue de l'atlantique<br>56340 Carnac</div>#}
                                                        <div class="icon-plus-wrapper"><span class="icon-plus"></span>
                                                        </div>
                                                    </div>
                                                    {% if event.getFieldValue( 'vignette' ).destinationContentId is defined and event.getFieldValue( 'vignette' ).destinationContentId %}
                                                        {% set imageContent = load_content_by_content_id(event.getFieldValue('vignette').destinationContentId) %}
                                                        {{ ez_render_field( imageContent, "image", {'parameters': { 'alias': 'event_home'} } ) }}
                                                    {% endif %}

                                                </div>
                                            </a>
                                        </article>
                                    {% endif %}
                                    {% set last_id = event.id %}
                                {% endfor %}
                            {% endfor %}
                        </div>
                    </div>
                </div>
                {% block lien_agenda %}
                    {% if rootAgendaId %}
                        <div class="voir-tout-wrapper">
                            <a href="{{ path( 'ez_urlalias', {'locationId': rootAgendaId } ) }}" class="voir-tout">Voir
                                tout l'agenda <span class="icon-plus"></span></a>
                        </div>
                    {% endif %}
                {% endblock %}
            {% else %}
                <div class="no_event">Aucun événement à partir de la date sélectionnée.</div>
            {% endif %}
        </div>
    </div>
    <div class="loading"></div>
</div>

<script>
    $(function () {

        $('#date-agenda').datetimepicker({
            locale: 'fr',
            format: 'dd/mm/yy',
            defaultDate: moment(),
            minDate: moment().add(-30, 'days') // Current day
        });
        $("#date-agenda").on("dp.change", function (e) {
            $.ajax({
                type: "post",
                url: "{{ path('ayaline_agenda_home',{'locationId':rootAgendaId, 'template': 'AyalineEzAgendaCollectivitesBundle:home:timeline.html.twig', 'charLimit': charLimit}) }}#bloc-agenda-2",
                data: {date_start: $("#date-agenda").val()},
                beforeSend: function () {
                    $(".loading").show();
                },
                success: function (data) {
                    $('#bloc-agenda-2').html(data);
                    $('.scrollbar-macosx').scrollbar();
                },
                complete: function () {
                    $(".loading").hide();

                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert("Status: " + textStatus);
                    alert("Error: " + errorThrown);
                }
            });

            return false
        });
    });
</script>