{if !empty($promocards)}
<section class="s-slider-section is-promocards">

    {* PROMOCARDS *}
    <ul class="s-slider-block" id="js-home-slider">
        {foreach $promocards as $_slide}
            <li class="s-slide-wrapper" style="
                {if $_slide.color}color: {$_slide.color};{/if}
                {if $_slide.image}background-image: url({$_slide.image});{/if}
            ">
                <div class="s-slide-block">

                    {if !empty($_slide.countdown_datetime)}
                        <div class="s-counter">
                            <span class="js-promo-countdown" data-start="{date('Y-m-d H:i:s')}" data-end="{$_slide.countdown_datetime}"></span>
                        </div>
                    {/if}

                    <h3 class="s-header wa-pt-16">{$_slide.title|escape|truncate:90}</h3>

                    {if !empty($_slide.body)}
                        <p class="s-description wa-mt-16" itemprop="description">{$_slide.body|escape}</p>
                    {/if}

                    {if !empty($_slide.button_text)}
                        <a class="s-slide-button button small" href="{$_slide.link}" title="ert">{$_slide.button_text|escape}</a>
                    {/if}

                </div>
                {if empty($_slide.button_text)}
                <a class="s-slide-link" href="{$_slide.link}"></a>
                {/if}
            </li>
        {/foreach}
    </ul>

    <script>
        ( function($) {
            // DOM
            var $slider = $("#js-home-slider");
            if (!$slider.length) { return false; }

            // VARS
            var href = "{$wa_active_theme_url}bxslider/jquery.bxslider.min.js?v{$wa_theme_version}";

            // INIT
            initCountDown($slider);

            (!$.fn.bxSlider) ? $.getScript(href, initSlider) : initSlider();

            // FUNCTIONS

            function initSlider() {
                var slide_count = $slider.find("li").length;

                $slider.bxSlider({
                    auto : slide_count > 1,
                    touchEnabled: true,
                    pause : 5000,
                    autoHover : true,
                    pager: slide_count > 1
                });
            }

            function initCountDown($wrapper) {
                var $countdowns = $wrapper.find(".js-promo-countdown");
                if ($countdowns.length) {
                    $countdowns.each( function() {
                        var $wrapper = $(this),
                            options = {
                                $wrapper: $wrapper,
                                start: $wrapper.data('start').replace(/-/g, '/'),
                                end: $wrapper.data('end').replace(/-/g, '/')
                            };

                        if (typeof CountDown === "function") {
                            new CountDown(options);
                        } else {
                            $wrapper.remove();
                        }
                    });
                }
            }

        })(jQuery);
    </script>
</section>
{/if}