<div class="trm-banner">
    <% if(type === 'img'){ 
        let style = `object-position:${position || 'top'};object-fit:${fit || 'cover'};` %>
    <!-- banner cover -->
    <%- swich_imgs(bgurl,{
        style:style,
        alt:"banner",
        class:"trm-banner-cover"
    }) %>
    <!-- banner cover end -->
    <% } else if(type === 'slideshow' && Array.isArray(bgurl)) { %>
    <!-- banner slideshow cover-->
    <div class="swiper-container trm-slideshow">
        <div class="swiper-wrapper">
            <%  bgurl.forEach((item,index) => {  
                let style = `object-position:${(Array.isArray(position) ? position[index]  : position) || 'top'};object-fit:${(Array.isArray(fit) ? fit[index]  : fit) || 'cover'}` %>
            <div class="swiper-slide">
                <img style="<%- style %>" src="<%= url_for(item) %>" alt="banner" class="trm-banner-cover <%- Array.isArray(position) ? (position[index] || 'top') : position %>" data-swiper-parallax-y="-200" data-swiper-parallax-scale="1.2">
            </div>
            <% }) %>
        </div>
    </div>
    <!-- banner slideshow cover end -->
    <% } else if(type === 'video'){ %>
    <!-- banner video cover -->
    <video autoplay="autoplay" loop muted playsinline webkit-playinginline class="trm-banner-cover">
        <source src="<%= url_for(bgurl) %>" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
        Your browser does not support HTML5 video.
    </video>
    <!-- banner video cover end -->
    <% } %>

    <!-- banner content -->
    <div class="trm-banner-content trm-overlay">
        <div class="container">
            <div class="row">
                <% if(!page.single_column) { %>
                <div class="col-lg-4"></div>
                <% } %>
                <div class="<%- !page.single_column ? 'col-lg-8':'col-lg-12' %>">

                    <!-- banner title -->
                    <div class="<%- !page.single_column ? 'trm-banner-text':'trm-banner-text trm-text-center' %> ">
                        <div class="trm-label trm-mb-20">
                            <%= locals.bannerText || locals.banner_text %>
                        </div>
                        <h1 class="trm-mb-30 trm-hsmb-font">
                            <%- locals.bannerTitle || locals.banner_title %>
                        </h1>

                        <% if(is_home() && (locals.videoUrl || locals.video_url)){ %>
                            <a data-fancybox data-fancybox="gallery" href="<%- locals.videoUrl || locals.video_url %>" class="trm-btn trm-btn-border">
                                Video <%- icon(theme.icons.play) %>
                            </a>
                        <% } else { %>
                            <ul class="trm-breadcrumbs trm-label">
                                <li>
                                    <a href="<%- url_for('/') %>" class="trm-anima-link">Home</a>
                                </li>
                                <li>
                                    <span>
                                        <%- path.split('/')[0] %>
                                    </span>
                                </li>
                            </ul>
                        <% } %>
                    </div>
                    <!-- banner title end -->

                    <!-- scroll hint -->
                    <span id="scroll-triger" class="trm-scroll-hint-frame">
                        <div class="trm-scroll-hint"></div>
                        <span class="trm-label">Scroll down</span>
                    </span>
                    <!-- scroll hint end -->

                </div>
            </div>
        </div>
    </div>
    <!-- banner content end -->
</div>