{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
{% from '@bonniernews/dn-design-system-web/components/button/button.njk' import Button %}
{% from '@bonniernews/dn-design-system-web/components/group-header/group-header.njk' import GroupHeader %}
{% from '@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite.njk' import IconUse %}
{% from '@bonniernews/dn-design-system-web/components/teaser-footer/teaser-footer.njk' import TeaserFooter %}

{% macro TeaserListVertical(params) %}
  {% set componentClassName = "ds-teaser-list-vertical" %}
  {% set classNamePrefix = componentClassName + "--" %}
  {% set attributes = getAttributes(params.attributes) %}
  {% set showButton = params.listLink and params.listLink.text and params.listLink.url %}

  {%- set classes = [
    componentClassName,
    "ds-theme--" + params.theme if params.theme,
    classNamePrefix + "flexible" if params.flexible,
    classNamePrefix + "linked" if showButton,
    params.classNames if params.classNames
  ] | join(" ") %}

  <div class="{{ classes }}" {{- attributes | safe }}>
    {{ GroupHeader({
      title: params.listTitle,
      showBottomBorder: params.flexible
    }) }}

    <div class="{{ componentClassName + '__content'}}">
      {% for teaser in params.teasers %}
        {{ TeaserListVerticalItem(teaser) }}
      {% endfor %}
    </div>
    {% if showButton %}
      <div class="ds-teaser-list-vertical__link">
        {{ Button({
          text: params.listLink.text,
          href: params.listLink.url,
          variant: 'secondaryFilled',
          fullWidth: true,
          classNames: params.listLink.classNames,
          attributes: params.listLink.attributes,
          forcePx: false
        })}}
      </div>
    {% endif %}
  </div>
{% endmacro %}

{% macro TeaserListVerticalItem(teaser) %}
  {% set attributes = getAttributes(teaser.attributes) %}
  {%- set classes = [
    "ds-teaser-list-vertical__item",
    "ds-teaser-list-vertical__item--italic" if teaser.isItalicHeadline,
    "ds-theme--" + teaser.theme if teaser.theme,
    teaser.classNames if teaser.classNames
  ] | join(" ") %}

  <a href="{{teaser.targetLink}}" class="{{ classes }}" {{- attributes | safe }}>
    <div class="ds-teaser-list-vertical__item-text">
      {% if teaser.vignette %}
        <div class="ds-teaser-list-vertical__item-vignette">{{ teaser.vignette }}</div>
      {% endif %}
      <h3 class="ds-teaser-list-vertical__item-title">
        {%- if teaser.highlight %}
          <span class="ds-teaser-list-vertical__item-highlight">{{ teaser.highlight }}</span>
        {% endif %}
        {{- teaser.title }}</h3>
        {% if teaser.publicationTime or teaser.sectionName %}
          {{ TeaserFooter({
            variant: 'informationText',
            publicationTime: teaser.publicationTime,
            sectionName: teaser.sectionName
          }) }}
        {% endif %}
    </div>

    {% if teaser.mediaHtml %}
      <div class="ds-teaser-list-vertical__item-img">
        {{ teaser.mediaHtml | safe }}
        {% if teaser.showPlayButton %}
          {{ IconUse({ icon: 'play_arrow-filled', classNames: "ds-teaser-list-vertical__item-video-icon" }) -}}
        {% endif %}
      </div>
    {% endif %}
  </a>
{% endmacro %}