{if($wntheme.show_home_carousel)}
{php}
    $carouselWidth = $wntheme['carousel_width'] ?? 21;
    $carouselHeight = $wntheme['carousel_height'] ?? 9;
    $carouselGap = $wntheme['carousel_gap'] ?? 10;

{/php}

<div class="contpostX gap home-carousel-wrapper">
    <div class="main-slider clearfix">

        <!-- left -->
        <div class="sp-slideshow" style="overflow:hidden;">
            <div class="swiper-container wntheme-swiper wntheme-swiper-image">
                <div class="swiper-wrapper">
                    {if($wntheme.carousel_website_type)}
                    {maccms:website num="999" type="'. ($wntheme['carousel_website_type']) .'" by="time" order="desc"}
                    <div class="swiper-slide">
                        <a class="block-fea swiper-lazy slide" href="{$vo.website_jumpurl}" target="_blank" title="{$vo.website_name}" data-background="{:mac_url_img($vo.website_pic)}">
                            <div class="swiper-lazy-preloader"></div>
                            <div class="overlay-1"></div>
                            <header class="video-header"><span class="video-title"><span class="badge arc_v2">推荐</span>{$vo.website_name}</span></header>
                        </a>
                    </div>
                    {/maccms:website}
                    {/if}

                    {maccms:vod num="999" level="9" by="time" order="desc"}
                    <div class="swiper-slide">
                        <a class="block-fea swiper-lazy slide" href="{$vo|mac_url_vod_detail}" title="{$vo.vod_name}" data-background="{if !empty($vo.vod_pic_slide)}{$vo.vod_pic_slide|mac_url_img}{else/}{$vo.vod_pic|mac_url_img}{/if}">
                            <div class="swiper-lazy-preloader"></div>
                            <div class="overlay-1"></div>
                            <header class="video-header"><span class="video-title"><span class="badge arc_v2">推荐</span>{$vo.vod_name}</span></header>
                        </a>
                    </div>
                    {/maccms:vod}
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>

        <!-- right -->
        <div class="small-slider">
            {maccms:website ids="'. ($wntheme['fiexed_carousel_website_id']) .'" by="time" order="desc"}
            <div class="small-slider-item"><a class="small-slider-img lazyload" href="{$vo.website_jumpurl}" data-original="{:mac_url_img($vo.website_pic)}">
                    <div class="overlay-1"></div>
                    <div class="title"><span class="badge arc_v2">推荐</span>{$vo.website_name}</div>
                </a>
            </div>
            {/maccms:website}
        </div>
    </div>
</div>
{/if}


<style>
    :root {
        --carousel-aspect-ratio: {$carouselWidth} / {$carouselHeight};
        --carousel-image-gap: {$carouselGap}px;
    }

    .sp-slideshow{
        float:none;
        width: calc(100% * 2/ 3);
        height:100%;
        aspect-ratio: var(--carousel-aspect-ratio);
        margin-right: var(--carousel-image-gap);
    }

    .main-slider{
        display: flex;
        flex-wrap: wrap;
    }

    .small-slider{
        float:none;
        width: calc(100% * 1/ 3 - var(--carousel-image-gap));

    }

    .small-slider-item{
        margin-bottom: var(--carousel-image-gap);
        width: 100%;
        object-fit: cover;
    }

    .small-slider-item:first-child{
        margin-bottom: calc(var(--carousel-image-gap) / 2);
    }

    .block-fea.slide{
		padding-bottom: 0;
        aspect-ratio: var( --carousel-aspect-ratio);
		height: 100%;
		width: 100%;
		object-fit: cover;
	}

    @media screen and (max-width: 768px) {
        .sp-slideshow{
            width: 100%;
            margin-right: 0;
            margin-bottom: var(--carousel-image-gap);
        }

        .small-slider{
            width: 100%;
        }

        .small-slider-item{
            width: calc(50% - var(--carousel-image-gap) / 2) !important;
            margin-bottom: 0;
            height: 100%;
        }

        .small-slider-item:first-child{
            margin-right: var(--carousel-image-gap);
            margin-bottom: 0;
        }

        .home-carousel-wrapper{
            padding: 0;
        }
    }
</style>


<!-- <script>
    // on jquery dom ready
    $(function(){
        console.log('calculating carousel width and height');
        // get left width
        $oldLeftWidth = $('.sp-slideshow').width(); // get left width when there is no gap
        console.log("left width: ", $oldLeftWidth);

        // get right width
        $oldRightWidth = $('.small-slider').width(); // get right width width when there is no gap
        console.log("right width: ", $oldRightWidth);

        // get gap
        $gap = 10; // 10px
        console.log("gap: ", $gap);

        // calculate aspect ratio
            // total = left + right + gap


        // update dom
        //set left width

        // for dekstop (window width > 768px)
        if($(window).width() > 768){

            $totalWidth = $oldLeftWidth + $oldRightWidth;
            console.log("total width: ", $totalWidth);

            // left ratio = left / total
            $leftRatio = ($oldLeftWidth + $gap) / $totalWidth;
            $updatedLeftWidth = $totalWidth * $leftRatio;
            console.log("left ratio: ", $updatedLeftWidth);

            // right ratio = right / total
            $rightRatio = ($oldRightWidth) / $totalWidth;
            $updatedRightWidth = $totalWidth * $rightRatio;
            console.log("right ratio: ", $updatedRightWidth);

            $('.sp-slideshow').css('width', $updatedLeftWidth + 'px');
            //set right width
            $('.small-slider').css('width', $updatedRightWidth + 'px');
            // set gap
            // left image item
            $('.sp-slideshow').css('margin-right', $gap + 'px');
            // first right image item
            $('.small-slider-item:first-child').css('margin-bottom', $gap + 'px');
        }else{
            // for mobile (window width <= 768px)
            $('.sp-slideshow').css('width', '100%');
            //set right width
            $('.small-slider').css('width', '100%');
            $('.small-slider-item').css('width', 'calc(50% - '+  $gap + 'px)');

            // set gap
            // left image item
            $('.sp-slideshow').css('margin-right', '0');
            // first right image item
            $('.small-slider-item:first-child').css('margin-right', $gap + 'px');
        }
    });

</script> -->