{% set ul_html_flex_diaporama %}
    <ul class="slides">
        {% for key, slide in slides %}
            <li class="slide_{{ key }}" >
                {% if slide.fields.media_video is defined and not ez_is_field_empty(slide, 'media_video') %}
                    <div class="video-container">
                        {% set video_poster = "" %}
                        {% if not ez_is_field_empty(slide, 'image') %}
                            {% set imageAlias = ez_image_alias( slide.getField('image'), slide.versionInfo, parameters.alias|default( 'original' ) ) %}
                            {% set video_poster = imageAlias.uri %}
                        {% endif %}
                        <video preload="auto"{% if video_poster != '' %} poster="{{ video_poster }}"{% endif %}>
                            <source data-src="{{ ez_field_value(slide, 'media_video') }}" type="video/mp4" />
                        </video>
                        <div class="video-controls">
                            <button type="button" class="playBtn" id="play-pause"></button>
                        </div>
                    </div>
                {% 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>
                {% elseif not ez_is_field_empty(slide, 'image') %}
                    {% if isHomePage and diaporama_image_home_filter[ezpublish.siteaccess.name] is defined %}
                        {{ ez_render_field(slide, 'image', { parameters: { alias: diaporama_image_home_filter[ezpublish.siteaccess.name] } }) }}
                    {% elseif isHomePage and diaporama_image_home_filter is defined %}
                        {{ ez_render_field(slide, 'image', { parameters: { alias: diaporama_image_home_filter } }) }}
                    {% elseif diaporama_image_filter[ezpublish.siteaccess.name] is defined  %}
                        {{ ez_render_field(slide, 'image', { parameters: { alias: diaporama_image_filter[ezpublish.siteaccess.name] } }) }}
                    {% 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"{% 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">
                                    <div class="caption-in">
                                        {% if accroche['internal_location'] %}
                                            <a href="{{ path(accroche['internal_location']) }}"
                                               {% if accroche['new_window'].bool %}data-rel="external" target="_blank" {% endif %}></a>
                                        {% elseif accroche['external_link'] %}
                                            <a href="{{ accroche['external_link'] }}"
                                               {% if accroche['new_window'].bool %}data-rel="external" target="_blank" {% endif %} ></a>
                                        {% endif %}
                                        <h2 class="accroche">
                                            {% set contentAccroche = accroche['content'] %}
                                            {{ ez_content_name( contentAccroche.contentInfo )|raw }}
                                        </h2>
                                        {% if not ez_is_field_empty( contentAccroche, "subtitle" ) %}
                                            <span class="subtitle">{{ ez_field_value(contentAccroche, "subtitle")|raw }}</span>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    {% endif %}
                {% endif %}
            </li>
        {% endfor %}
    </ul>
{% endset %}
{% if slides|length > 0 %}

    {% set _options_global_diaporama = '' %}
    {% if options_global_diaporama is defined and options_global_diaporama|length > 0 %}
        {% for key,value in options_global_diaporama %}
            {% set option = key|escape('js') ~ ":'" ~ value|escape('js') ~ "'," %}
            {% set _options_global_diaporama =  _options_global_diaporama ~ option %}
        {% endfor %}
    {% endif %}

    <div id="slideshowId" class="flexslider"></div>
    <script>
        function loadDiaporama(){
            var ul_html_flex_diaporama = {{ ul_html_flex_diaporama|json_encode()|raw }}
                    $('#slideshowId').append(ul_html_flex_diaporama);
            $slider = $('#slideshowId');
            $slider.flexslider(
                    {
                        {% if _options_global_diaporama != '' %}
                        {{ _options_global_diaporama|raw }}
                        {% else %}
                        animation: "fade",
                        touch: true,
                        video:true,
                        animationLoop: true,
                        smoothHeight: true,
                        {% endif %}
                        start:function(slider) {
                            var _currentSlideIndex = slider.currentSlide;
                            var _currentSilde = slider.slides.eq(_currentSlideIndex);
                            var _currentVideo = _currentSilde.find('video');
                            if (_currentVideo.length > 0){
                                var _video = _currentVideo.get(0);
                                _video.play();
                                _currentSilde.find('.playBtn').removeClass('pause');
                                _currentSilde.find('.playBtn').addClass('play');
                            }
                        },
                        after: function(slider) {
                            var _currentSlideIndex = slider.currentSlide;
                            var _currentSilde = slider.slides.eq(_currentSlideIndex);
                            var _currentVideo = _currentSilde.find('video');
                            if (_currentVideo.length > 0){
                                var _video = _currentVideo.get(0);
                                _video.play();
                                _currentSilde.find('.playBtn').removeClass('pause');
                                _currentSilde.find('.playBtn').addClass('play');
                            }
                        },
                        before: function(slider){
                            var _currentSlideIndex = slider.currentSlide;
                            var _currentSilde = slider.slides.eq(_currentSlideIndex);
                            var _currentVideo = _currentSilde.find('video');
                            if (_currentVideo.length > 0){
                                var _video = _currentVideo.get(0);
                                _video.pause();
                                _currentSilde.find('.playBtn').addClass('pause');
                                _currentSilde.find('.playBtn').removeClass('play');
                            }
                        }
                    }
            );
            {% if isRandom is defined and isRandom %}
            var randomthis = Math.floor((Math.random() * $('#slideshowId.flexslider .slides li').length ));
            $slider.flexslider(randomthis);
            {% endif %}
            /* Video */
            if (window.matchMedia("(min-width: 993px)").matches) {

                $('.video-container video source').each(function(){
                    var _me = this;
                    var _sourceFile = $(_me).attr("data-src");
                    $(_me).attr("src", _sourceFile);
                    var _video = $(this).parents('.video-container').find('video');
                    _video.bind("playing", function() {
                        $slider.flexslider("stop");
                    });
                    _video.bind("ended", function() {
                        $slider.flexslider("play");
                        $(_me).parents('.video').find('.playBtn').addClass('pause');
                        $(_me).parents('.video').find('.playBtn').removeClass('play');
                    });
                });
                $('.playBtn').click(function(){
                    var _video = $(this).parents('.video-container').find('video').get(0);
                    if (_video.paused == true) {
                        $(this).removeClass('pause');
                        $(this).addClass('play');
                        _video.play();
                    } else {
                        $(this).addClass('pause');
                        $(this).removeClass('play');
                        _video.pause();
                    }
                });
            }
        };
        setTimeout(loadDiaporama, 0);
    </script>
{% endif %}