{% set ul_html_flex_diaporama %}
<ul class="slides">
    {% for slide in slides %}
        <li>
            {% if not ez_is_field_empty(slide, 'image') %}
                {% if isHomePage and diaporama_image_home_filter is defined %}
                    {{ ez_render_field(slide, 'image', { parameters: { alias: diaporama_image_home_filter } }) }}
                {% elseif diaporama_image_filter is defined %}
                    {{ ez_render_field(slide, 'image', { parameters: { alias: diaporama_image_filter } }) }}
                {% else %}
                    {{ ez_render_field(slide, 'image') }}
                {% endif %}
                {% if contentsForTemplates[slide.contentInfo.id] is defined %}
                    {% for accroche in contentsForTemplates[slide.contentInfo.id] %}
                        <div class="container-caption capt-{{ loop.index }}"{% if accroche['offset-left'] or accroche['offset-top'] %} style="{% if accroche['offset-left'] %}left: {{ accroche['offset-left'] }}px;right: auto;{% endif %}{% if accroche['offset-top'] %}top: {{ accroche['offset-top'] }}px;{% endif %}"{% endif %}>
                            {% if accroche['internal_location'] != '' %}
                                {% set link =  accroche['internal_location'] != '' ? accroche['internal_location'] : false %}
                            {% elseif accroche['external_link'] != '' %}
                                {% set link =  accroche['external_link'] != '' ? accroche['external_link'] : false %}
                            {% endif %}
                            <div class="flex-caption accroche-{{ loop.index }} {{ link is defined ? ' clickable_class' : '' }}">
                                {% if accroche['internal_location'] %}
                                    <a href="{{ path(accroche['internal_location']) }}" {% if accroche['new_window'].bool %}rel="external"{% endif %}></a>
                                {% elseif accroche['external_link'] %}
                                    <a href="{{ accroche['external_link'] }}" {% if accroche['new_window'].bool %}rel="external"{% endif %}></a>
                                {% endif %}
                                <h2 class="accroche-{{ loop.index }}">
                                    {% set contentAccroche = accroche['content'] %}
                                    {{ ez_content_name( contentAccroche.contentInfo )|raw }}
                                    {% if not ez_is_field_empty( contentAccroche, "subtitle" ) %}
                                        <span>{{ ez_render_field(contentAccroche, "subtitle") }}</span>
                                    {% endif %}
                                    {% if loop.index != 1 %}
                                        <span></span>
                                    {% endif %}
                                </h2>
                            </div>
                        </div>
                    {% endfor %}
                {% endif %}
            {% elseif slide.fields.video_tag is defined and not ez_is_field_empty(slide, 'video_tag') %}
                <div class="fluid-width-video-wrapper">
                    {{ ez_field_value(slide, 'video_tag')|raw }}
                </div>
            {% endif %}
        </li>
    {% endfor %}
</ul>
{% endset %}

<div id="slideshowId" class="flexslider">
</div>

<script>
    var ul_html_flex_diaporama  = {{ ul_html_flex_diaporama|json_encode()|raw }};
    $('#slideshowId').append(ul_html_flex_diaporama);
    // Call fitVid before FlexSlider initializes, so the proper initial height can be retrieved.
    $('#slideshowId').fitVids().flexslider(
        {% if options_global_diaporama is defined %}
            {{ options_global_diaporama|json_encode()|raw }}
        {% else %}
            {
                animation: "fade",
                touch: true,
                animationLoop: true,
                smoothHeight: true
            }
        {% endif %}
    );
</script>
