{% comment %}
  Renders a countdown expired time

  Accepts:
  - title: {String} Title of countdown offer
  - subtitle: {String} Subtitle of countdown offer
  - time: {String} Expired offer time
  - show_days: {Boolean} Show countdown days
  - show_hours: {Boolean} Show countdown hours
  - show_minutes: {Boolean} Show countdown minutes
  - show_seconds: {Boolean} Show countdown seconds


  Render:
  {% render 'countdown-style-3',
      title: section.settings.countdown_title,
      subtitle: section.settings.countdown_subtitle,
      time: section.settings.countdown_time,
      show_days: section.settings.show_days,
      show_hours: section.settings.show_hours,
      show_minutes: section.settings.show_minutes,
      show_seconds: section.settings.show_seconds
    %}
{% endcomment %}

<xo-animate xo-cascade>
  {% assign timestamp = time | date: '%s' | append: '000' %}
  <xo-countdown xo-timestamp='{{timestamp}}' class='countdown3'>
    <div class='countdown3__text'>
      <div class='countdown3__subtitle'>{{ subtitle }}</div>
      <h3 class='countdown3__title'>{{ title }}</h3>
    </div>
    <div class='countdown3__time'>
      {% if show_days %}
        <div class='countdown3__time--flex'>
          <div class='countdown3__circle'>
            <xo-countdown-day></xo-countdown-day>
          </div>
          <div class='countdown3__circle--text'>Days</div>
        </div>
      {% endif %}
      {% if show_hours %}
        <div class='countdown3__time--flex'>
          <div class='countdown3__circle'>
            <xo-countdown-hour></xo-countdown-hour>
          </div>
          <div class='countdown3__circle--text'>Hours</div>
        </div>
      {% endif %}
      {% if show_minutes %}
        <div class='countdown3__time--flex'>
          <div class='countdown3__circle'>
            <xo-countdown-minute></xo-countdown-minute>
          </div>
          <div class='countdown3__circle--text'>Mins</div>
        </div>
      {% endif %}
      {% if show_seconds %}
        <div class='countdown3__time--flex'>
          <div class='countdown3__circle'>
            <xo-countdown-second></xo-countdown-second>
          </div>
          <div class='countdown3__circle--text'>Secs</div>
        </div>
      {% endif %}
    </div>
    <div class='countdown3__expired'>
      <div class='countdown3__block'>
        {% if show_days %}
          <div class='countdown3__time--flex'>
            <div class='countdown3__circle'>
              <xo-countdown-day>00</xo-countdown-day>
            </div>
            <div class='countdown3__circle--text'>Days</div>
          </div>
        {% endif %}
        {% if show_hours %}
          <div class='countdown3__time--flex'>
            <div class='countdown3__circle'>
              <xo-countdown-hour>00</xo-countdown-hour>
            </div>
            <div class='countdown3__circle--text'>Hours</div>
          </div>
        {% endif %}
        {% if show_minutes %}
          <div class='countdown3__time--flex'>
            <div class='countdown3__circle'>
              <xo-countdown-minute>00</xo-countdown-minute>
            </div>
            <div class='countdown3__circle--text'>Mins</div>
          </div>
        {% endif %}
        {% if show_seconds %}
          <div class='countdown3__time--flex'>
            <div class='countdown3__circle'>
              <xo-countdown-second>00</xo-countdown-second>
            </div>
            <div class='countdown3__circle--text'>Secs</div>
          </div>
        {% endif %}
      </div>
    </div>
  </xo-countdown>
</xo-animate>
