{% if view.module.slideshow.data %}
<div id="main-carousel">
    <div id="home-carousel" class="carousel slide carousel-fade" data-ride="carousel">
        <div class="carousel-inner">
            {% for idSlide, item in view.module.slideshow.data %}
            <div id="image-{{ idSlide }}" class="item{% if loop.first %} active{% endif %}{% if not item.button and item.url %} cursor-active{% endif %}"{% if not item.button and item.url %} data-link="{{ item.url }}{% endif %}">
                <div class="carousel-caption {% if item.position == 1 %}carousel-caption-left{% elseif item.position == 2 %}carousel-caption-right{% else %}carousel-caption-center{% endif %}">
                    {% if item.title %}<h1>{{ item.title|raw }}</h1>{% endif %}
                    {% if item.text %}<h2>{{ item.text|raw }}</h2>{% endif %}

                    {% if item.url and item.button %}
                    <a href="{{ item.url }}" target="{{ item.target }}" class="btn btn-lg btn-primary" title="{{ item.button|striptags|raw }}">
                        {{ item.button|raw }}
                    </a>
                    {% endif %}
                </div>
            </div>
            <script>
            var windowWidth = window.innerWidth;

            var el = document.querySelector('#image-{{ idSlide }}');
            var webpSupport = window.sessionStorage.getItem('webpSupport');

            var imgWebp_desktop = '{{ item.file.desktop.webp.src }}';
            var imgImage_desktop = '{{ item.file.desktop.image.src }}';

            var imgWebp_mobile = '{{ item.file.mobile.webp.src }}';
            var imgImage_mobile = '{{ item.file.mobile.image.src }}';

            if (windowWidth > 480 || (!imgImage_mobile && !imgWebp_mobile)) {
                if (webpSupport && imgWebp_desktop) {
                    el.setAttribute('style', 'background-image: url('+imgWebp_desktop+')');
                }
                else if (!webpSupport && imgImage_desktop) {
                    el.setAttribute('style', 'background-image: url('+imgImage_desktop+')');
                }
            }
            else {
                if (webpSupport && imgWebp_mobile) {
                    el.setAttribute('style', 'background-image: url('+imgWebp_mobile+')');
                }
                else if (!webpSupport && imgImage_mobile) {
                    el.setAttribute('style', 'background-image: url('+imgImage_mobile+')');
                }
            }
            </script>
            {% endfor %}
        </div>

        {% if view.module.slideshow.data|length > 1 %}
        <a class="main-carousel-left" href="#home-carousel" data-slide="prev" title="Voltar"><i class="fa fa-angle-left"></i></a>
        <a class="main-carousel-right" href="#home-carousel" data-slide="next" title="Avançar"><i class="fa fa-angle-right"></i></a>
        {% endif %}
    </div>
</div>
{% endif %}