{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
{% from '@bonniernews/dn-design-system-web/components/button-toggle/button-toggle.njk' import ButtonToggle %}

{% macro TagHeader(params) %}
  {%- set componentClassName = "ds-tag-header" %}
  {% set attributes = getAttributes(params.attributes) %}

  {%- set classes = [
    componentClassName,
    'ds-theme--' + params.theme if params.theme,
    componentClassName + '--has-border' if params.descriptionHtml or params.articleCount,
    params.classNames if params.classNames
  ] | join(" ") %}

  <div class="{{ classes }}" {{- attributes | safe }}>
    <div class="{{ componentClassName }}__content">
      <div class="{{ componentClassName }}__bar">
        <div class="{{ componentClassName }}__heading">
          {% if params.vignetteText %}
            {% if params.vignetteTargetUrl %}
              <a href="{{ params.vignetteTargetUrl }}" class="{{ componentClassName }}__vignette">{{ params.vignetteText }}</a>
            {% else %}
              <span class="{{ componentClassName }}__vignette">{{ params.vignetteText }}</span>
            {% endif %}
          {% endif %}
          <h1 class="{{ componentClassName }}__title">{{ params.title}}</h1>
          {% if params.toggle %}
            {{ ButtonToggle({
              variant: 'primary',
              size: 'md',
              text: params.toggleText,
              selectedText: params.toggleSelectedText,
              selected: params.toggleSelected,
              loading: params.toggleLoading,
              classNames: params.toggleClassNames,
              attributes: params.toggleAttributes
            }) }}
          {% endif %}
        </div>
        {% if params.mediaHtml %}
          <div class="{{ componentClassName + '__media'}}">
            {{ params.mediaHtml | safe }}
          </div>
        {% endif %}
      </div>
      {% if params.descriptionHtml %}
        <div class="{{ componentClassName }}__description">
          {{ params.descriptionHtml | safe }}
        </div>
      {% endif %}
      {% if params.articleCount %}
        <p class="{{ componentClassName }}__article-count">{{ params.articleCount }} {% if params.articleCount === 1 %}artikel{% else %}artiklar{% endif %}</p>
      {% endif %}
    </div>
  </div>
{% endmacro %}