{{#options.deal_stroke.active}}
    <div class="deal-stroke-outer">
        <div class="section-cover-wrap">
			<div class="section-cover-image deal-stroke-cover-image lazy-img" data-pagebuilder-key="layout.components.deal_stroke.cover" data-src="{{layout.components.deal_stroke.cover.source}}"></div>
		</div>
        <div class="deal-stroke flex flex-a-c flex-j-c">
            <div class="left flex flex-a-c">
                <div class="parent_pad header" data-pagebuilder-key="components.deal_stroke.heading">
                    {{#components.deal_stroke.heading}}
                        <div>{{components.deal_stroke.heading}}</div>
                    {{/components.deal_stroke.heading}}
                </div>
                <div class="parent_pad description" data-pagebuilder-key="components.deal_stroke.message">
                    {{#components.deal_stroke.message}}
                        <div>{{components.deal_stroke.message}}</div>
                    {{/components.deal_stroke.message}}
                </div>
            </div>
            <div class="right flex flex-a-c">
                {{#options.deal_stroke.countdown.active}}
                    <div class="parent_pad countdown" data-date="{{date}}">
                        <div class="flex flex-a-c flex-j-c">
                            <div class="days">
                                <div class="num" data-format="%D"></div>
                                <div class="word">DAYS</div>
                            </div>
                            <div class="days">
                                <div class="num" data-format="%H"></div>
                                <div class="word">HOURS</div>
                            </div>
                            <div class="mins">
                                <div class="num" data-format="%M"></div>
                                <div class="word">MINS</div>
                            </div>
                            <div class="secs">
                                <div class="num" data-format="%S"></div>
                                <div class="word">SECS</div>
                            </div>
                        </div>
                    </div>
                {{/options.deal_stroke.countdown.active}}
                {{#ifCoupon}}
                    {{#components.deal_stroke.coupon}}
                        <div class="parent_pad coupon flex flex-a-c flex-j-c">
                            <div>
                                <div class="coupon-code copy pointer" data-clipboard-target=".deal-stroke .coupon-code div" data-pagebuilder-key="components.deal_stroke.coupon">
                                    <div>{{components.deal_stroke.coupon}}</div>
                                </div>
                            </div>
                        </div>
                    {{/components.deal_stroke.coupon}}
                {{/ifCoupon}}
                {{#ifButton}}
                    {{#components.deal_stroke.coupon}}
                        <div class="parent_pad coupon flex flex-a-c flex-j-c">
                            <div>
                                <a href="{{components.deal_stroke.button.action}}" class="btn small btn-outline deal_stroke_btn" data-pagebuilder-key="components.deal_stroke.button.text">
                                    <div>{{components.deal_stroke.button.text}}</div>
                                </a>
                            </div>
                        </div>
                    {{/components.deal_stroke.coupon}}
                {{/ifButton}}
            </div>
        </div>
    </div>
    <script>
        (function(){
    
            var $countDown = $(".countdown");
            var initDate;
    
            var cd = function(event) {
    
                $(this).find('.num').each(function(){
    
                    let html = event.strftime(this.dataset.format).replace(/(\d)/g, '<span>$1</span>');
                    if(html != this.innerHTML){
    
                        $(this).html(html);
                    }
                });
            }
    
    
            var initcc = function(){
    
                initDate = $countDown.data('date');
                
                $countDown
        
                    .countdown(
                        
                        moment(initDate).format('Y/M/D HH:mm:ss'), 
                        
                        cd
                    )
                ;
            };
    
            initcc();
        })();
    </script>
{{/options.deal_stroke.active}}