<script type="text/template" id="lot-slider-template">
    <div class='single-lot__slider'>
        <div class="swiper-container bp-gallery-top">
            <div id="lotImages" class="swiper-wrapper">
                <% if (youtubeID) { %>
                <div class="swiper-slide bp-swiper-slide_youtube">
                    <iframe width='807' height='455' src="https://www.youtube.com/embed/<%- youtubeID %>?showinfo=0" class="skip-lazy" loading="lazy" referrerpolicy="strict-origin-when-cross-origin" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" frameborder="0"
                            allowfullscreen></iframe>
                </div>
                <% } %>
                <% _.forEach(images, function(image, index) { %>
                <a href="<%- image.custom %>" data-fancybox-bp="gallery" class="swiper-slide"
                   style="background-image:url('<%- image.custom %>')">
                </a>
                <% }); %>
            </div>
            <div class="swiper-button-next swiper-button-white"></div>
            <div class="swiper-button-prev swiper-button-white"></div>
        </div>
        <div class="swiper-container single-lot__thumb bp-gallery-thumbs">
            <div class="swiper-wrapper">
                <% if (youtubeID) { %>
                <div class="swiper-slide bp-swiper-slide_youtube" style="background-image:url('<%- featureImage.medium %>')"></div>
                <% } %>
                <% _.forEach(images, function(image, index) { %>
                <div class="swiper-slide" style="background-image:url('<%- image.medium %>')"></div>
                <% }); %>
            </div>
        </div>
    </div>
</script>