{#

Element ID: Element02
Element Name: Video slider

#}

<section class="video-carousel {% if webinar_active %}video-carousel--webinar-active{% endif %} bg-dark-arrows">
    <div class="video-carousel__floating-title">
        <h2 class="h1">FREE VIDEO DRILLS FROM PROS</h2>
        <a href="{{ element.free_drills_page_template }}" class="btn btn--hollow">See all free drills</a>
        
        <div class="video-carousel__arrows">
            <a href="#" class="btn btn--hollow btn__arrow js-video-carousel-previous">
                <svg class="arrow-left"><use href="{{ site.theme.link }}/frontend/img/icons.svg#arrow-left"></use></svg></a>
            <a href="#" class="btn btn--hollow btn__arrow js-video-carousel-next"><svg class="arrow-left"><use href="{{ site.theme.link }}/frontend/img/icons.svg#arrow-right"></use></svg></a>
        </div>
    </div>
    
    <div class="owl-carousel " id="js-video-carousel">
        {% for drill in element.free_drills %}
            <div class="video-carousel__item">
                <div class="video-carousel__title-wrap">
                    <h2 class="video-carousel__title {% if (loop.first) %}active{% endif %}" data-title-index="{{ loop.index }}">{{ drill.title}}</h2>       
                </div>
                 
                <div class="video-carousel__image img-play-button play-only-center  modal-video-trigger-center" data-video-url="https://www.youtube.com/embed/{{ function("get_youtube_id", drill.youtube_link)}}">
                    <img src="{{ function("get_youtube_thumb", drill.youtube_link)}}" />
                    <div class="play-icon">
                        <svg class="arrow-left"><use href="{{ site.theme.link }}/frontend/img/icons.svg#play-icon"></use></svg>
                        {# <img src="{{ site.theme.link }}/frontend/img/play-icon.svg" /></div> #}
                    </div>
                </div>
                <div class="video-carousel__content-item {% if (loop.first) %}active{% endif %}" data-content-index="{{ loop.index }}">
                    <h3>DESCRIPTION</h3>
                        <p>{{ drill.description | truncate(35) }}</p>
                    <h3>KEY POINTS</h3>
                    <p>{{ drill.key_points  | truncate(35)  }}</p>
                    <div class="video-carousel__buttons">
                        <a href="{{ drill.link }}" class="btn btn--hollow small">Learn more</a>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
        
        <div class="video-carousel__arrows bottom">
            <a href="#" class="btn btn--hollow btn__arrow js-video-carousel-previous">
                <svg class="arrow-left"><use href="{{ site.theme.link }}/frontend/img/icons.svg#arrow-left"></use></svg></a>
            <a href="#" class="btn btn--hollow btn__arrow js-video-carousel-next"><svg class="arrow-left"><use href="{{ site.theme.link }}/frontend/img/icons.svg#arrow-right"></use></svg></a>
        </div>

</section>