{#

Element ID: Element01
Element Name: Slider

#}


<section id="{{ element.html_id  }}" class="carousel-section ie-margin">
    <div class="slider" id="js-slider">
        <div class="slider-items">
        {% for slide in element.slides %}
            <div class="slider__item-wrap {{ slide.no_overlay ? "no-overlay" : "" }}  {{ loop.index == 1 ? "active" : "" }}">
                <div class="slider__item">
                    <img class="slider__img" src="{{ TimberImage(slide.background_image).src }}">
                    <div class="slider__item-content">
                        <h2 class="h1">{{   slide.title }}   </h2>
                        <div class="slider__item-details">
                            <p>{{ slide.subtitle }}</p>
                            <p><strong>{{ slide.second_subtitle }}</strong></p>
                            <div class="btn-center">
                                {%  if(slide.link_to_video) %}

                                    {% if ( slide.video.url ) %}
                                        <a href="#" class="btn btn--watch video-trigger"  data-video-link="{{ slide.video.url }}" onClick="gtag('event', 'play_video', { 'event_category' : 'Play Slider video', 'event_label' : '{{ slide.video.title }}' });">
                                            <span>{{ slide.button_text }}</span>
                                            <svg class="icon-play"><use xlink:href="{{ site.theme.link }}/frontend/icons/icons.svg#icon-play"></use></svg>
                                        </a>
                                    {% endif %}
                                {% else %}
                                    <a href="{{ slide.button_url }}" class="btn btn--gradient">{{ slide.button_text }}</a>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}
        </div>

        {%  if (element.slides|length > 1) %}
        <div class="slider__pagination"></div>
        <div class="slider-arrows">
            <div class="slider-arrows__left">
                <svg class="icon-arrow-left">
                    <use xlink:href="{{ site.theme.link }}/frontend/icons/icons.svg#icon-arrow-left"></use>
                </svg>
            </div>
            <div class="slider-arrows__right">
                <svg class="icon-arrow-right">
                    <use xlink:href="{{ site.theme.link }}/frontend/icons/icons.svg#icon-arrow-right"></use>
                </svg>
            </div>
        </div>
        {% endif %}
    </div>
</section>