{% if populars %}
    <section id="popular" class="position-relative mt-2">
        <h2 class="blind">인기검색어</h2>
        <div class="popular_inner overflow-hidden" style="width: 400px;height: 20px;">
            <ul class="d-flex m-0 p-0">
                {% for popular in populars %}
                    <li class="item py-2 pe-4" style="width: auto;">
                        <a href="/bbs/search?stx={{ popular.pp_word }}" style="main-font">{{ popular.pp_word }}</a>
                    </li>
                {% endfor %}
            </ul>
            <span class="popular_btns d-none">
                <a href="#" class="pp-next"><i class="fa fa-angle-right" aria-hidden="true"></i></a>
                <a href="#" class="pp-prev"><i class="fa fa-angle-left" aria-hidden="true"></i></a>
            </span>
        </div>
    </section>

    <link rel="stylesheet" href="{{ theme_asset(request, 'js/owlcarousel/owl.carousel.min.css') }}">
    <script src="{{ theme_asset(request, 'js/owlcarousel/owl.carousel.min.js') }}"></script>
    <script>
        jQuery(function($){
            
            var popular_el = ".popular_inner ul",
                p_width = $(popular_el).width(),
                c_width = 0;
        
            $(popular_el).children().each(function() {
                c_width += $(this).outerWidth( true );
            });
        
            if( c_width > p_width ){
                var $popular_btns = $(".popular_inner .popular_btns");
                $popular_btns.show();
        
                var p_carousel = $(popular_el).addClass("owl-carousel").owlCarousel({
                    items:5,
                    loop:true,
                    nav:false,
                    dots:false,
                    autoWidth:true,
                    mouseDrag:false,
                });
        
                $popular_btns.on("click", ".pp-next", function(e) {
                    e.preventDefault();
                    p_carousel.trigger('next.owl.carousel');
                })
                .on("click", ".pp-prev", function(e) {
                    e.preventDefault();
                    p_carousel.trigger('prev.owl.carousel');
                });
            }
        });
    </script>
{% endif %}