{% from '@bonniernews/dn-design-system-web/components/teaser-card/teaser-card.njk' import TeaserCard %}
{% from '@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite.njk' import IconUse %}

{% macro TeaserCounter(params) %}
  {% set componentClassName = "ds-teaser--counter" %}

  {% set extraClasses = [
    componentClassName,
    params.classNames if params.classNames
  ] | join(" ") %}

  {% call TeaserCard({
    targetLink: params.targetLink,
    areaType: params.areaType,
    attributes: params.attributes,
    classNames: extraClasses
  }) %}
    <div class="ds-teaser__content">
      <div class="ds-teaser__content-inner">
        {% if params.title %}
          <h2 class="{{ componentClassName + '__title' }}">
            <span class="{{ componentClassName + '__title--highlighted' }}">{{ params.title }}</span>
            {% if params.subtitle %}
              – {{ params.subtitle }}
            {% endif %}
          </h2>
        {% endif %}

        {% if params.counterNumber is not null or params.counterText %}
          <div class="{{ componentClassName + '__counter-wrapper' }}">
            {% if params.counterNumber is not null %}
              <ul class="{{ componentClassName + '__list' }}">
                {% for digit in params.counterNumber | string %}
                  <li class="{{ componentClassName + '__item' }}">{{ digit }}</li>
                {% endfor %}
              </ul>
            {% endif %}

            {% if params.counterText %}
              <p class="{{ componentClassName + '__counter-text' }}">
                {{ params.counterText | safe }}
              </p>
            {% endif %}
          </div>
        {% endif %}
      </div>
    </div>

    {% if params.countdown %}
      <div class="{{ componentClassName + '__countdown' }}">
        {{ IconUse({ icon: "clock" }) }}
        <span class="{{ componentClassName + '__countdown-text' }}">
          {{ params.countdown }}
        </span>
      </div>
    {% endif %}

    {% if params.sectionName %}
      <div class="{{ componentClassName + '__section-name' }}">
        {{ params.sectionName }}
      </div>
    {% endif %}

    {% if params.mediaHtml %}
      <div class="ds-teaser__media">
        {{ params.mediaHtml | safe }}
      </div>
    {% endif %}

  {% endcall %}
{% endmacro %}