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

{% block particle %}
<div class="g-video-container g-video-container-columns-{{ particle.columns }} {{ particle.class|e }}" >
    {% if particle.title %}<h2 class="g-title">{{ particle.title|raw }}</h2>{% endif %}
    {% for item in particle.items %}

    <div class="g-video-inner">
        <div id="g-{{ id }}-{{ loop.index }}" data-g-video-id="g-{{ id }}-{{ loop.index }}"  class="g-video">
            {% if item.source == 'vimeo' %}
            <iframe width="100%" height="auto" src="https://player.vimeo.com/video/{{ item.video|replace({'https://vimeo.com/': '', 'https://vimeo.com/ondemand/': ''}) }}?autoplay={% if item.autoplay == 'enabled' %}1{% else %}0{% endif %}&amp;loop={% if item.loop == 'enabled' %}1{% else %}0{% endif %}&amp;muted={% if item.muted == 'enabled' %}1{% else %}0{% endif %}" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
            {% endif %}

            {% if item.source == 'youtube' %}
            <iframe width="100%" height="auto" src="https://www.youtube.com/embed/{{ item.video|replace({'https://www.youtube.com/watch?v=': '', 'http://www.youtube.com/watch?v=' : '', 'https://youtu.be/': '', 'http://youtu.be/': ''}) }}?showinfo={% if item.info == 'enabled' %}1{% else %}0{% endif %}&amp;autoplay={% if item.autoplay == 'enabled' %}1{% else %}0{% endif %}&amp;controls={% if item.controls == 'enabled' %}1{% else %}0{% endif %}{% if item.loop == 'enabled' %}&amp;loop=1&amp;playlist={{ item.video|replace({'https://www.youtube.com/watch?v=': '', 'http://www.youtube.com/watch?v=' : '', 'https://youtu.be/': '', 'http://youtu.be/': ''}) }}{% endif %}&amp;rel={% if item.related == 'enabled' %}1{% else %}0{% endif %}&amp;mute={% if item.muted == 'enabled' %}1{% else %}0{% endif %}&amp;start={{ item.start|default('0') }}" frameborder="0" allowfullscreen></iframe>
            {% endif %}

            {% if item.source == 'local' %}
            <video {% if item.controls == "disabled" %}onclick="this.paused?this.play():this.pause();"{% endif %} {% if item.autoplay == 'enabled' %}autoplay{% endif %} poster="{{ url(item.posterimage)|e }}" {% if item.loop == 'enabled' %}loop{% endif %} {% if item.controls == "enabled" %}controls{% else %}class="g-video-nocontrols"{% endif %} {% if item.muted == 'enabled' %}muted{% endif %} playsinline>
                {% for source in item.local %}
                <source src="{{ url(source.file)|e }}" type="video/{{ source.file|slice(-4)|replace({'.': ''}) }}">
                    {% endfor %}
                </video>
                {% if item.controls == "disabled" %}
                <div class="g-videolocal-play {% if item.autoplay == 'enabled' %}pause{% endif %}"></div>
                {% endif %}
                {% endif %}

                {% if item.source == 'external' %}
                <video {% if item.controls == "disabled" %}onclick="this.paused?this.play():this.pause();"{% endif %} {% if item.autoplay == 'enabled' %}autoplay{% endif %} poster="{{ url(item.posterimage)|e }}" {% if item.loop == 'enabled' %}loop{% endif %} {% if item.controls == "enabled" %}controls{% else %}class="g-video-nocontrols"{% endif %} {% if item.muted == 'enabled' %}muted{% endif %} playsinline>
                    <source src="{{ item.video }}" type="video/{{ item.video|slice(-4)|replace({'.': ''}) }}">
                    </video>
                    {% if item.controls == "disabled" %}
                    <div class="g-videolocal-play {% if item.autoplay == 'enabled' %}pause{% endif %}"></div>
                    {% endif %}
                    {% endif %}

                    {% if item.source == 'preset' %}
                    <video {% if item.controls == "disabled" %}onclick="this.paused?this.play():this.pause();"{% endif %} {% if item.autoplay == 'enabled' %}autoplay{% endif %} {% if item.loop == 'enabled' %}loop{% endif %} {% if item.controls == "enabled" %}controls{% else %}class="g-video-nocontrols"{% endif %} {% if item.muted == 'enabled' %}muted{% endif %} playsinline>
                        <source src="{{ url(gantry.theme.presets[gantry.theme.preset].styles.slideshow.video)|default(url(gantry.config.get('styles.slideshow.video'))) }}" type="video/{{ gantry.theme.presets[gantry.theme.preset].styles.slideshow.video|default(gantry.config.get('styles.slideshow.video'))|slice(-4)|replace({'.': ''}) }}">
                            <source src="{{ url(gantry.theme.presets[gantry.theme.preset].styles.slideshow.video)|default(url(gantry.config.get('styles.slideshow.video')))|replace({'webm': 'mp4'}) }}" type="video/mp4">
                            </video>
                            {% if item.controls == "disabled" %}
                            <div class="g-videolocal-play {% if item.autoplay == 'enabled' %}pause{% endif %}"></div>
                            {% endif %}
                            {% endif %}
                        </div>
                        {% if item.caption %}
                            <div class="g-video-caption">{{ item.caption|raw }}</div>
                        {% endif %}
                    </div>
                    {% endfor %}
                </div>
            {% endblock %}

            {% block javascript_footer %}
            {% do gantry.load('jquery') %}
            <script src="{{ url('gantry-theme://js/video.init.js') }}"></script>
        {% endblock %}