<div class="section-all-courses-category-design-2">
    <div class="section-container">
        <div class="carousel-container">
            <div class="slider" id="all-courses-category-carousel-{{instid}}">
                {{>filter_edwiserpbf/categorycard}}
            </div>
            <button class="carousel-control-prev{{instid}} position-absolute" type="button">
                <img src="{{cdnurl}}/CDN/coursesncategories/indicator-left.svg"
                    alt="prev" />
            </button>

            <button class="carousel-control-next{{instid}} position-absolute" type="button">
                <img src="{{cdnurl}}/CDN/coursesncategories/indicator-right.svg"
                    alt="next" />
            </button>

        </div>
    </div>
</div>

<style>
    .section-all-courses-category-design-2 {
        padding: 0 24px 50px;
        direction: ltr;
    }

    .section-all-courses-category-design-2 .section-container {
        max-width: 1320px;
        margin: 0 auto;
    }

    .section-all-courses-category-design-2 h3 {
        color: #313848;
        text-align: center;
        font-size: 34px;
        font-weight: 700;
        line-height: 42px;
        letter-spacing: -1px;
        margin: 0;
    }

    .section-all-courses-category-design-2 .desc {
        color: #4C5A73;
        text-align: center;
        font-size: 18px;
        font-weight: 400;
        line-height: 26px;
        margin: 3px auto 0;
        padding: 0 12px;
        max-width: 900px;
    }

    .section-all-courses-category-design-2 .carousel-container {
        position: relative;
        /*margin: 20px 0 0;*/
    }

    .section-all-courses-category-design-2 .carousel-container .slick-track {
        display: flex !important;
    }

    .section-all-courses-category-design-2 .carousel-container .slick-slide {
        height: inherit !important;
    }

    .section-all-courses-category-design-2 .carousel-container .slider {
        padding: 0 18px;
    }

    .section-all-courses-category-design-2 .slick-slider .slick-slide {
        padding: 0;
    }

    .section-all-courses-category-design-2 .card-container {
        height: 100%;
        padding: 0 12px 20px;
    }

    .section-all-courses-category-design-2 .card {
        padding: 20px;
        border-radius: 6px;
        border: 1px solid #D5DDEA;
        background: #FFF;
        transition: box-shadow 0.3s ease;

        overflow: hidden;
        position: relative;
    }

    .section-all-courses-category-design-2 .card .card-header {
        display: flex;
        padding: 20px;
        flex-direction: column;
        gap: -2px;
        border-radius: 6px 6px 0px 0px;
        background: #0051F9;
    }

    .section-all-courses-category-design-2 .card .card-header .title1 {
        color: #FFF;
        font-size: 14px;
        font-weight: 600;
        line-height: 26px;
        margin: 0;

    }

    .section-all-courses-category-design-2 .card .card-header .title2 {
        color: #FFF;
        font-size: 18px;
        font-weight: 600;
        line-height: 26px;
        margin: 0;

    }

    .section-all-courses-category-design-2 .card .card-desc {
        color: #4C5A73;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        margin: 20px 0 18px;
    }

    .section-all-courses-category-design-2 .card .cards-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: auto;

        overflow: hidden;
        position: relative;
    }

    .section-all-courses-category-design-2 .card .cards-footer .footer-desc {
        color: #0051F9;
        font-size: 14px;
        font-weight: 700;
        line-height: 22px;
        margin: 0;
    }

    .section-all-courses-category-design-2 .card .cards-footer .footer-btn {
        height: 32px;
        padding: 5px 20px;
        border-radius: 4px;
        border: 1px solid #0051F9;
        background: #FFF;
        color:  #0051F9;
        font-size: 14px;
        font-weight: 600;
        transition: background 0.3s ease-in, color 0.2s ease-in;
        cursor: pointer;
    }

    .section-all-courses-category-design-2 .card .cards-footer .footer-btn:hover {
        background: #0051F9;
        color: #FFF;
    }

    .section-all-courses-category-design-2 .card:hover {
        box-shadow: 0px 6px 15px 0px rgba(0, 0, 0, 0.12);
    }

    .section-all-courses-category-design-2 .carousel-control-prev{{instid}},
    .section-all-courses-category-design-2 .carousel-control-next{{instid}} {
        width: 46px;
        height: 46px;
        background-color: white;
        border: 1px solid #0051f9;
        border-radius: 50%;
        opacity: 1;
        transition: all 0.3s ease;
        margin: auto 0;
        transform: translateY(-50%);
    }

    .section-all-courses-category-design-2 .carousel-control-prev{{instid}} {
        left: 2px;
        top:50%;
    }

    .section-all-courses-category-design-2 .carousel-control-next{{instid}} {
        right: 0px;
        top:50%;
    }

    .section-all-courses-category-design-2 .carousel-control-prev{{instid}}:hover,
    .section-all-courses-category-design-2 .carousel-control-next{{instid}}:hover {
        background-color: white;
        filter: drop-shadow(0px 4px 15px rgba(0, 0, 0, 0.12));
    }

    .section-all-courses-category-design-2 .carousel-indicators {
        position: static;
        margin-bottom: 0px;
        gap: 8px;
    }

    .section-all-courses-category-design-2 .carousel-indicators li {
        opacity: 1;
        background-color: #D5DDEA !important;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        margin: 0;
        cursor: pointer;
    }

    .section-all-courses-category-design-2 .carousel-indicators li button {
        display: none;
    }

    .section-all-courses-category-design-2 .carousel-indicators .slick-active {
        background-color: #5B6880 !important;
    }
    .ellips-item-2{
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }
    @media screen and (max-width: 1024px) {
        .section-all-courses-category-design-2 .section-container {
            max-width: 820px;
        }

        .section-all-courses-category-design-2 .carousel-control-prev{{instid}},
        .section-all-courses-category-design-2 .carousel-control-next{{instid}} {
            display: none !important;
        }
    }

    @media screen and (max-width: 767px) {
        .section-all-courses-category-design-2 .section-container {
            max-width: 450px;
        }

        .section-all-courses-category-design-2 .card-container {
            padding: 0;
        }

        .section-all-courses-category-design-2 .carousel-container .slider {
            padding: 0;
        }
    }

    @media screen and (min-width: 1024px) {
        .edw-limitedwidth-block .section-all-courses-category-design-2 .section-container {
            max-width: 820px;
        }
    }
</style>
<script>
if(window.location.href.toLowerCase().indexOf('editor.php') !== -1){
    $(document).ready((function(){$("#all-courses-category-carousel-{{instid}}").parents(".edw-limitedwidth-block").length>0?$("#all-courses-category-carousel-{{instid}}").slick({slidesToShow:2,slidesToScroll:1,prevArrow:$(".carousel-control-prev"),nextArrow:$(".carousel-control-next"),dots:false,dotsClass:"carousel-indicators",responsive:[{breakpoint:768,settings:{slidesToShow:1,slidesToScroll:1}}]}).on("setPosition",(function(s,o){o.$slides.css("height",o.$slideTrack.height()+"px"),$(".slick-slide > div").css("height","100%")})):$("#all-courses-category-carousel-{{instid}}").slick({slidesToShow:4,slidesToScroll:1,prevArrow:$(".carousel-control-prev"),nextArrow:$(".carousel-control-next"),dots:false,dotsClass:"carousel-indicators",responsive:[{breakpoint:1200,settings:{slidesToShow:3,slidesToScroll:1}},{breakpoint:1024,settings:{slidesToShow:2,slidesToScroll:1}},{breakpoint:768,settings:{slidesToShow:1,slidesToScroll:1}}]}).on("setPosition",(function(s,o){o.$slides.css("height",o.$slideTrack.height()+"px"),$(".slick-slide > div").css("height","100%")}))}));
}
</script>
{{#js}}
require(['jquery', 'local_edwiserpagebuilder/slick'], function($) {
    $(document).ready(function() {
        let carousleContainer = $("#all-courses-category-carousel-{{instid}}");
        if (carousleContainer.parents(".edw-limitedwidth-block").length > 0) {
            $("#all-courses-category-carousel-{{instid}}").slick({
                slidesToShow: 2,
                slidesToScroll: 1,
                prevArrow: $(".carousel-control-prev{{instid}}"),
                nextArrow: $(".carousel-control-next{{instid}}"),
                dots: false,
                dotsClass: "carousel-indicators",
                responsive: [{
                    breakpoint: 768,
                    settings: {
                        slidesToShow: 1,
                        slidesToScroll: 1,
                    },
                }, ],
            }).on('setPosition', function (event, slick) {
                slick.$slides.css('height', slick.$slideTrack.height() + 'px');
                $('.slick-slide > div').css('height', '100%');
              });
        } else {
            $("#all-courses-category-carousel-{{instid}}").slick({
                slidesToShow: 4,
                slidesToScroll: 1,
                prevArrow: $(".carousel-control-prev{{instid}}"),
                nextArrow: $(".carousel-control-next{{instid}}"),
                dots: false,
                dotsClass: "carousel-indicators",
                responsive: [{
                        breakpoint: 1200,
                        settings: {
                            slidesToShow: 3,
                            slidesToScroll: 1,
                        },
                    },
                    {
                        breakpoint: 1024,
                        settings: {
                            slidesToShow: 2,
                            slidesToScroll: 1,
                        },
                    },
                    {
                        breakpoint: 768,
                        settings: {
                            slidesToShow: 1,
                            slidesToScroll: 1,
                        },
                    },
                ],
            })
            .on('setPosition', function (event, slick) {
                slick.$slides.css('height', slick.$slideTrack.height() + 'px');
                $('.slick-slide > div').css('height', '100%');
              });
        }
    });
});
{{/js}}
