{% if end_date != blank %}
<div class="timer">
  {% if title != blank %}
    <p class="timer__title">{{ title }}</p>
  {% endif %}
  <div class="timer-display">
    <div class="timer-block">
      <span class="timer-block__num js-timer-days first">00</span>
      <span class="timer-block__unit">Days</span>
    </div>
    <div class="timer-block">
      <span class="timer-block__num js-timer-hours">00</span>
      <span class="timer-block__unit">Hours</span>
    </div>
    <div class="timer-block">
      <span class="timer-block__num js-timer-minutes">00</span>
      <span class="timer-block__unit">Min</span>
    </div>
    <div class="timer-block">
      <span class="timer-block__num js-timer-seconds">00</span>
      <span class="timer-block__unit">Sec</span>
    </div>
  </div>
</div>


<script type="text/javascript">
  var second = 1000,
      minute = second * 60,
      hour = minute * 60,
      day = hour * 24;
  var countDown = new Date('{{- end_date -}}').getTime(),
      x = setInterval(function() {
      var now = new Date().getTime(),
          distance = countDown - now;
      document.querySelector('.js-timer-days').innerText = Math.floor(distance / (day)),
        document.querySelector('.js-timer-hours').innerText = Math.floor((distance % (day)) / (hour)),
      document.querySelector('.js-timer-minutes').innerText = Math.floor((distance % (hour)) / (minute)),
      document.querySelector('.js-timer-seconds').innerText = Math.floor((distance % (minute)) / (second));
    }, second)
</script>
{% endif %}
