{% comment %}
  Renders a countdown-style5 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
{% endcomment %}

<xo-animate xo-cascade>
  {% assign timestamp = time | date: '%s' | append: '000' %}
  <xo-countdown xo-timestamp='{{timestamp}}' class='countdown-style5'>
    <div class='countdown5__text'>
      <h3>{{ title }}</h3>
      <h3 style='padding-top: 10px;'>{{ subtitle }}</h3>
    </div>
    <div class='countdown-style5__time'>
      {% if show_days %}
        <div class='countdown-style5__circle'>
          <div class='countdown-style5__day'>
            <xo-countdown-day></xo-countdown-day>
          </div>
          <span>Days</span>
        </div>
      {% endif %}
      {% if show_hours %}
        <div class='countdown-style5__circle'>
          <div class='countdown-style5__day'>
            <xo-countdown-hour></xo-countdown-hour>
          </div>

          <span>Hours</span>
        </div>
      {% endif %}
      {% if show_minutes %}
        <div class='countdown-style5__circle'>
          <div class='countdown-style5__day'>
            <xo-countdown-minute></xo-countdown-minute>
          </div>
          <span>Mins</span>
        </div>
      {% endif %}
      {% if show_seconds %}
        <div class='countdown-style5__circle'>
          <div class='countdown-style5__day'>
            <xo-countdown-second></xo-countdown-second>
          </div>
          <span>Sec</span>
        </div>
      {% endif %}
    </div>
    <div class='countdown-style5__expired'>
      <div class='countdown-style5__block'>
        {% if show_days %}
          <div class='countdown-style5__circle'>
            <div class='countdown-style5__day'>
              <xo-countdown-day>00</xo-countdown-day>
            </div>
            <span>Days</span>
          </div>
        {% endif %}
        {% if show_hours %}
          <div class='countdown-style5__circle'>
            <div class='countdown-style5__day'>
              <xo-countdown-hour>00</xo-countdown-hour>
            </div>

            <span>Hours</span>
          </div>
        {% endif %}
        {% if show_minutes %}
          <div class='countdown-style5__circle'>
            <div class='countdown-style5__day'>
              <xo-countdown-minute>00</xo-countdown-minute>
            </div>
            <span>Mins</span>
          </div>
        {% endif %}
        {% if show_seconds %}
          <div class='countdown-style5__circle'>
            <div class='countdown-style5__day'>
              <xo-countdown-second>00</xo-countdown-second>
            </div>
            <span>Sec</span>
          </div>
        {% endif %}
      </div>
    </div>
  </xo-countdown>
</xo-animate>
