{% extends '@nucleus/partials/particle.html.twig' %}

{% block particle %}
    {% styles %}
        {% for item in particle.items %}
            {% if item.videothumb %}
                <style>
                    #g-owlcarousel-{{ id }} #video-item-{{ loop.index }} .owl-video-tn {
                        background: url('{{ url(item.videothumb)|e }}') !important;
                        background-size: cover !important;
                    }
                    #g-owlcarousel-{{ id }} #video-item-{{ loop.index }} .owl-video-tn img {
                        opacity: 0;
                    }
                </style>
            {% endif %}
        {% endfor %}
    {% endstyles %}

    {% block layout %}
        {# Include Particle Layouts #}
        {% if particle.source and particle.source != 'particle' %}
            {% include '@particles/owlcarousel/' ~ particle.layout ~ '-' ~ particle.source ~ '.html.twig' %}
        {% else %}
            {% include '@particles/owlcarousel/' ~ particle.layout ~ '.html.twig' %}
        {% endif %}

    {% endblock %}
{% endblock %}

{% block javascript_footer %}
    {% do gantry.load('jquery') %}
    <script src="{{ url('gantry-theme://js/owlcarousel.js') }}"></script>
    <script type="text/javascript">
    jQuery(document).ready(function () {
        var owl{{ id|replace({'-':'_'}) }} = jQuery('#g-owlcarousel-{{ id }}');
        owl{{ id|replace({'-':'_'}) }}.owlCarousel({
            items: {{ particle.displayitems }},
            rtl: {% if gantry.page.direction == 'rtl' %}true{% else %}false{% endif %},
            {% if particle.animateOut and particle.animateOut != 'default' %}
            animateOut: '{{ particle.animateOut|default('fadeOut')|e }}',
            {% endif %}
            {% if particle.animateIn and particle.animateIn != 'default' %}
            animateIn: '{{ particle.animateIn|default('fadeIn')|e }}',
            {% endif %}
            {% if particle.nav == 'enabled' %}
            nav: true,
            navText: ['{{ particle.prevText|default('<i class="fa fa-chevron-left" aria-hidden="true"></i>')|e('js') }}', '{{ particle.nextText|default('<i class="fa fa-chevron-right" aria-hidden="true"></i>')|e('js') }}'],
            {% else %}
            nav: false,
            {% endif %}
            video:true,
            videoLoop: {% if particle.videoloop == 'enabled' %}true{% else %}false{% endif %},
            {% if particle.dots == 'enabled' %}
            dots: true,
            {% else %}
            dots: false,
            {% endif %}
            {% if particle.loop == 'enabled' and particle.layout != "showcase" and particle.layout != "newsslider" %}
            loop: true,
            {% else %}
            loop: false,
            {% endif %}
            {% if particle.autoplay == 'enabled' %}
            autoplay: true,
            autoplayTimeout: {{ particle.autoplaySpeed|default('5000') }},
            {% if particle.pauseOnHover == 'enabled' %}
            autoplayHoverPause: true,
            {% else %}
            autoplayHoverPause: false,
            {% endif %}
            {% else %}
            autoplay: false,
            {% endif %}
            URLhashListener: true,
            {% if particle.layout == "standard" or particle.layout == "testimonial" and particle.displayitems > "1" %}
            responsive:{
                0:{
                    items:1
                },
                750:{
                    items:{{ (particle.displayitems/2)|round(ceil) }}
                },
                1300:{
                    items:{{ particle.displayitems }}
                }
            },
            {% endif %}
            {% if particle.presets == 'enabled' %}
            startPosition: {{ max(1, gantry.theme.preset|replace({'preset':''})) - 1 }},
            {% endif %}
            {% if particle.videoautoplay == 'enabled' %}
            onInitialized: callback
            {% endif %}
        });
        {% if particle.videoautoplay == 'enabled' %}
        function callback(event) {
             owl{{ id|replace({'-':'_'}) }}.find('video').get(0).play();
        };
        {% endif %}
    });
    </script>
    <script src="{{ url('gantry-theme://js/owlcarousel.video.init.js') }}"></script>
{% endblock %}