{%- comment -%}
  Renders a countdown

  Accepts:
  - countdown: {Date and time} (required)
  - class: {String} a list class. (optional)
  - effect: {String} effect for countdown. (optional)

  Usage:
  {%- render 'countdown' with card_product.metafields.theme.countdown.value , class: 'xxx' -%}
{%- endcomment -%}

{%- assign effect_cd = effect | default: 'none' -%}
<hdt-countdown class="hdt-flex hdt-flex-wrap hdt-flex-col hdt-items-center {{ class }}" config='{"month":"{{ countdown | date: '%m' | plus: 0 }}", "date":"{{ countdown | date: '%d, %Y %H:%M:%S' }}", "hideTimerOnComplete": true, "hasZero": true }'>
  <div class="hdt-countdown__inner hdt-flex hdt-align-center hdt-justify-center" aria-hidden="true">
    <hdt-countdown-amount effect="{{ effect_cd }}" class="hdt-countdown__amount" data-days>00</hdt-countdown-amount>{{ 'sections.countdown_timmer.day_m' | t }}
    <span>:</span>
    <hdt-countdown-amount effect="{{ effect_cd }}" class="hdt-countdown__amount" data-hours>00</hdt-countdown-amount>{{ 'sections.countdown_timmer.hr_m' | t }}
    <span>:</span>
    <hdt-countdown-amount effect="{{ effect_cd }}" class="hdt-countdown__amount" data-minutes>00</hdt-countdown-amount>{{ 'sections.countdown_timmer.min_m' | t }}
    <span>:</span>
    <hdt-countdown-amount effect="{{ effect_cd }}" class="hdt-countdown__amount" data-seconds>00</hdt-countdown-amount>{{ 'sections.countdown_timmer.sec_m' | t }}
  </div>
</hdt-countdown>