{extends file="widgets/base/widget.tpl"}

{strip}
    {block name="et-widget-inline-styles"}
        {if $et_Countdown.customColorsEnabled}
            <style type="text/css">
                #{$et_BaseWidget.cssId}.bg-fullsize,
                #{$et_BaseWidget.cssId}.bg-boxed .container {
                     {if !empty($et_Countdown.colorBackground)}background-color: {$et_Countdown.colorBackground};{/if}
                     {if !empty($et_Countdown.colorFont)}color: {$et_Countdown.colorFont};{/if}
                }
            </style>
        {/if}
        {if !empty($et_Countdown.titleWidth.xs)
            || !empty($et_Countdown.titleWidth.sm)
            || !empty($et_Countdown.titleWidth.md)
            || !empty($et_Countdown.titleWidth.lg)
            || !empty($et_Countdown.titleWidth.xl)}
            <style type="text/css">
                {if !empty($et_Countdown.titleWidth.xs)} @media (max-width: {$et_global.breakpoints.xsMax}px) {  #{$et_BaseWidget.cssId} .et-countdown-title-wrapper { flex-basis: {$et_Countdown.titleWidth.xs}%; max-width: {$et_Countdown.titleWidth.xs}%; } }{/if}
                {if !empty($et_Countdown.titleWidth.sm)} @media (min-width: {$et_global.breakpoints.smMin}px) and (max-width: {$et_global.breakpoints.smMax}px) {  #{$et_BaseWidget.cssId} .et-countdown-title-wrapper { flex-basis: {$et_Countdown.titleWidth.sm}%; max-width: {$et_Countdown.titleWidth.sm}%; } }{/if}
                {if !empty($et_Countdown.titleWidth.md)} @media (min-width: {$et_global.breakpoints.mdMin}px) and (max-width: {$et_global.breakpoints.mdMax}px) {  #{$et_BaseWidget.cssId} .et-countdown-title-wrapper { flex-basis: {$et_Countdown.titleWidth.md}%; max-width: {$et_Countdown.titleWidth.md}%; } }{/if}
                {if !empty($et_Countdown.titleWidth.lg)} @media (min-width: {$et_global.breakpoints.lgMin}px) and (max-width: {$et_global.breakpoints.lgMax}px) {  #{$et_BaseWidget.cssId} .et-countdown-title-wrapper { flex-basis: {$et_Countdown.titleWidth.lg}%; max-width: {$et_Countdown.titleWidth.lg}%; } }{/if}
                {if !empty($et_Countdown.titleWidth.xl)} @media (min-width: {$et_global.breakpoints.xlMin}px) {  #{$et_BaseWidget.cssId} .et-countdown-title-wrapper { flex-basis: {$et_Countdown.titleWidth.xl}%; max-width: {$et_Countdown.titleWidth.xl}%; } }{/if}
            </style>
        {/if}
        {if !empty($et_Countdown.timerWidth.xs)
        || !empty($et_Countdown.timerWidth.sm)
        || !empty($et_Countdown.timerWidth.md)
        || !empty($et_Countdown.timerWidth.lg)
        || !empty($et_Countdown.timerWidth.xl)}
            <style type="text/css">
                {if !empty($et_Countdown.timerWidth.xs)} @media (max-width: {$et_global.breakpoints.xsMax}px) {  #{$et_BaseWidget.cssId} .et-countdown-timer-wrapper { flex-basis: {$et_Countdown.timerWidth.xs}%; max-width: {$et_Countdown.timerWidth.xs}%; } }{/if}
                {if !empty($et_Countdown.timerWidth.sm)} @media (min-width: {$et_global.breakpoints.smMin}px) and (max-width: {$et_global.breakpoints.smMax}px) {  #{$et_BaseWidget.cssId} .et-countdown-timer-wrapper { flex-basis: {$et_Countdown.timerWidth.sm}%; max-width: {$et_Countdown.timerWidth.sm}%; } }{/if}
                {if !empty($et_Countdown.timerWidth.md)} @media (min-width: {$et_global.breakpoints.mdMin}px) and (max-width: {$et_global.breakpoints.mdMax}px) {  #{$et_BaseWidget.cssId} .et-countdown-timer-wrapper { flex-basis: {$et_Countdown.timerWidth.md}%; max-width: {$et_Countdown.timerWidth.md}%; } }{/if}
                {if !empty($et_Countdown.timerWidth.lg)} @media (min-width: {$et_global.breakpoints.lgMin}px) and (max-width: {$et_global.breakpoints.lgMax}px) {  #{$et_BaseWidget.cssId} .et-countdown-timer-wrapper { flex-basis: {$et_Countdown.timerWidth.lg}%; max-width: {$et_Countdown.timerWidth.lg}%; } }{/if}
                {if !empty($et_Countdown.timerWidth.xl)} @media (min-width: {$et_global.breakpoints.xlMin}px) {  #{$et_BaseWidget.cssId} .et-countdown-timer-wrapper { flex-basis: {$et_Countdown.timerWidth.xl}%; max-width: {$et_Countdown.timerWidth.xl}%; } }{/if}
            </style>
        {/if}
        {if !empty($et_Countdown.descriptionWidth.xs)
        || !empty($et_Countdown.descriptionWidth.sm)
        || !empty($et_Countdown.descriptionWidth.md)
        || !empty($et_Countdown.descriptionWidth.lg)
        || !empty($et_Countdown.descriptionWidth.xl)}
            <style type="text/css">
                {if !empty($et_Countdown.descriptionWidth.xs)} @media (max-width: {$et_global.breakpoints.xsMax}px) {  #{$et_BaseWidget.cssId} .et-countdown-description-wrapper { flex-basis: {$et_Countdown.descriptionWidth.xs}%; max-width: {$et_Countdown.descriptionWidth.xs}%; } }{/if}
                {if !empty($et_Countdown.descriptionWidth.sm)} @media (min-width: {$et_global.breakpoints.smMin}px) and (max-width: {$et_global.breakpoints.smMax}px) {  #{$et_BaseWidget.cssId} .et-countdown-description-wrapper { flex-basis: {$et_Countdown.descriptionWidth.sm}%; max-width: {$et_Countdown.descriptionWidth.sm}%; } }{/if}
                {if !empty($et_Countdown.descriptionWidth.md)} @media (min-width: {$et_global.breakpoints.mdMin}px) and (max-width: {$et_global.breakpoints.mdMax}px) {  #{$et_BaseWidget.cssId} .et-countdown-description-wrapper { flex-basis: {$et_Countdown.descriptionWidth.md}%; max-width: {$et_Countdown.descriptionWidth.md}%; } }{/if}
                {if !empty($et_Countdown.descriptionWidth.lg)} @media (min-width: {$et_global.breakpoints.lgMin}px) and (max-width: {$et_global.breakpoints.lgMax}px) {  #{$et_BaseWidget.cssId} .et-countdown-description-wrapper { flex-basis: {$et_Countdown.descriptionWidth.lg}%; max-width: {$et_Countdown.descriptionWidth.lg}%; } }{/if}
                {if !empty($et_Countdown.descriptionWidth.xl)} @media (min-width: {$et_global.breakpoints.xlMin}px) {  #{$et_BaseWidget.cssId} .et-countdown-description-wrapper { flex-basis: {$et_Countdown.descriptionWidth.xl}%; max-width: {$et_Countdown.descriptionWidth.xl}%; } }{/if}
            </style>
        {/if}
        {if !empty($et_Countdown.linkWidth.xs)
        || !empty($et_Countdown.linkWidth.sm)
        || !empty($et_Countdown.linkWidth.md)
        || !empty($et_Countdown.linkWidth.lg)
        || !empty($et_Countdown.linkWidth.xl)}
            <style type="text/css">
                {if !empty($et_Countdown.linkWidth.xs)} @media (max-width: {$et_global.breakpoints.xsMax}px) {  #{$et_BaseWidget.cssId} .et-countdown-link-wrapper { flex-basis: {$et_Countdown.linkWidth.xs}%; max-width: {$et_Countdown.linkWidth.xs}%; } }{/if}
                {if !empty($et_Countdown.linkWidth.sm)} @media (min-width: {$et_global.breakpoints.smMin}px) and (max-width: {$et_global.breakpoints.smMax}px) {  #{$et_BaseWidget.cssId} .et-countdown-link-wrapper { flex-basis: {$et_Countdown.linkWidth.sm}%; max-width: {$et_Countdown.linkWidth.sm}%; } }{/if}
                {if !empty($et_Countdown.linkWidth.md)} @media (min-width: {$et_global.breakpoints.mdMin}px) and (max-width: {$et_global.breakpoints.mdMax}px) {  #{$et_BaseWidget.cssId} .et-countdown-link-wrapper { flex-basis: {$et_Countdown.linkWidth.md}%; max-width: {$et_Countdown.linkWidth.md}%; } }{/if}
                {if !empty($et_Countdown.linkWidth.lg)} @media (min-width: {$et_global.breakpoints.lgMin}px) and (max-width: {$et_global.breakpoints.lgMax}px) {  #{$et_BaseWidget.cssId} .et-countdown-link-wrapper { flex-basis: {$et_Countdown.linkWidth.lg}%; max-width: {$et_Countdown.linkWidth.lg}%; } }{/if}
                {if !empty($et_Countdown.linkWidth.xl)} @media (min-width: {$et_global.breakpoints.xlMin}px) {  #{$et_BaseWidget.cssId} .et-countdown-link-wrapper { flex-basis: {$et_Countdown.linkWidth.xl}%; max-width: {$et_Countdown.linkWidth.xl}%; } }{/if}
            </style>
        {/if}
    {/block}

    {block name="et-widget-container-inner"}
        {block name="et-countdown-headline"}
            <div class="et-countdown-headline">
                {include file="widgets/base/textfield.tpl" value=$et_Countdown.headline asRow=true type="h2" classes="et-widget-headline"}
            </div>
        {/block}

        {block name="et-countdown-content-wrapper"}
            <div class="row et-countdown-content-wrapper">
               {block name="et-countdown-title-wrapper"}
                   {if !empty($et_Countdown.title.value)}
                       <div class="col-12 col-lg et-countdown-title-wrapper">
                           <div class="et-countdown-title">
                               {include file="widgets/base/textfield.tpl" value=$et_Countdown.title asRow=false typeClass="h3" classes="et-countdown-title-content mb-0"}
                           </div>
                       </div>
                   {/if}
               {/block}
               {block name="et-countdown-timer-wrapper"}
                   <div class="col-12 col-lg et-countdown-timer-wrapper">
                       <div class="et-countdown-timer et-countdown-timer-layout-{$et_Countdown.timerLayout}" id="{$et_BaseWidget.cssId}-timer" data-target-time="{$et_Countdown.targetTimestamp}">
                           {if $et_Countdown.timerLayout === 'column'}
                               {block name="et-countdown-timer-layout-column"}
                                   <div class="et-count-timer-element">
                                       <div class="et-countdown-timer-days" data-timer-days="">00</div>
                                       <div class="et-countdown-timer-label">{et_language key='et360_timer_days'}</div>
                                   </div>
                                   <div class="et-count-timer-element">
                                       <div class="et-countdown-timer-hours" data-timer-hours="">00</div>
                                       <div class="et-countdown-timer-label">{et_language key='et360_timer_hours'}</div>
                                   </div>
                                   <div class="et-count-timer-element">
                                       <div class="et-countdown-timer-minutes" data-timer-minutes="">00</div>
                                       <div class="et-countdown-timer-label">{et_language key='et360_timer_minutes'}</div>
                                   </div>
                                   <div class="et-count-timer-element">
                                       <div class="et-countdown-timer-seconds" data-timer-seconds="">00</div>
                                       <div class="et-countdown-timer-label">{et_language key='et360_timer_seconds'}</div>
                                   </div>
                               {/block}
                           {else}
                               {block name="et-countdown-timer-layout-clock"}
                                   <span class="et-countdown-timer-days" data-timer-days="">00</span>
                                   <span class="et-countdown-timer-separator">{$et_Countdown.separator}</span>
                                   <span class="et-countdown-timer-hours" data-timer-hours="">00</span>
                                   <span class="et-countdown-timer-separator">{$et_Countdown.separator}</span>
                                   <span class="et-countdown-timer-minutes" data-timer-minutes="">00</span>
                                   <span class="et-countdown-timer-separator">{$et_Countdown.separator}</span>
                                   <span class="et-countdown-timer-seconds" data-timer-seconds="">00</span>
                               {/block}
                           {/if}
                       </div>
                   </div>
               {/block}
               {block name="et-countdown-description-wrapper"}
                   {if !empty($et_Countdown.description.value)}
                       <div class="col-12 col-lg et-countdown-description-wrapper">
                           <div class="et-countdown-description">
                               {include file="widgets/base/textfield.tpl" value=$et_Countdown.description asRow=false type="div" classes="et-countdown-description-content mb-0"}
                           </div>
                       </div>
                   {/if}
               {/block}
               {block name="et-countdown-link-wrapper"}
                   {if !empty($et_Countdown.link) && !empty($et_Countdown.link.href)}
                       <div class="col-12 col-lg et-countdown-link-wrapper et-align-horizontal-{$et_Countdown.linkAlignmentHorizontal}">
                           {capture name='etCountdownLinkLabel'}{include file="widgets/base/textfield.tpl" value=$et_Countdown.linkLabel type='span'}{/capture}
                           {include file='widgets/base/button.tpl' variant="{($et_Countdown.linkDisplayMode === 'button') ? 'primary':'link'}" label="{$smarty.capture.etCountdownLinkLabel}" href="{$et_Countdown.link.href}" isExternal="{$et_Countdown.link.external}" title="{$et_Countdown.link.title}"}
                       </div>
                   {/if}
               {/block}
            </div>
        {/block}
        {block name="et-countdown-script"}
            {inline_script}
                {literal}
                    <script>
                        $(document).ready(function() {
                            const $wrapper = $('#{/literal}{$et_BaseWidget.cssId}{literal}-timer');
                            const $daysContainer = $wrapper.find('[data-timer-days]');
                            const $hoursContainer = $wrapper.find('[data-timer-hours]');
                            const $minutesContainer = $wrapper.find('[data-timer-minutes]');
                            const $secondsContainer = $wrapper.find('[data-timer-seconds]');
                            if(!$wrapper.length) {
                                return;
                            }
                            const targetTimestamp = $wrapper.data('target-time') * 1000;
                            let timeDifference = Math.floor((targetTimestamp - (new Date().getTime())) / 1000);
                            if(timeDifference <= 0) {
                                // Timer has expired, no need to run any JS.
                                return;
                            }
                            setInterval(function() {
                                timeDifference -= 1;
                                if(timeDifference < 0) {
                                    return false;
                                }
                                let delta = timeDifference;
                                let days = Math.floor(delta / 86400);
                                delta -= days * 86400;
                                let hours = Math.floor(delta / 3600) % 24;
                                delta -= hours * 3600;
                                let minutes = Math.floor(delta / 60) % 60;
                                delta -= minutes * 60;
                                let seconds = delta % 60;
                                $daysContainer.text(days.toString(10).padStart(2, '0'));
                                $hoursContainer.text(hours.toString(10).padStart(2, '0'));
                                $minutesContainer.text(minutes.toString(10).padStart(2, '0'));
                                $secondsContainer.text(seconds.toString(10).padStart(2, '0'));
                            }, 1000);
                        });
                    </script>
                {/literal}
            {/inline_script}
        {/block}
    {/block}
{/strip}