{% macro tnaPicture(params) %}
{%- from 'components/button/macro.html' import tnaButton -%}
{%- from 'components/tabs/macro.html' import tnaTabs -%}

{%- set containerClasses = [params.classes] if params.classes else [] -%}
<figure class="tna-picture {{ ' '.join(containerClasses) }}" data-module="tna-picture"{% if params.informationLabelOpen %} data-information-label-open="{{ params.informationLabelOpen }}"{% endif %}{% if params.informationLabelClose %} data-information-label-close="{{ params.informationLabelClose }}"{% endif %} {%- if params.attributes %}{% for attribute, value in params.attributes.items() %} {{ attribute }}{% if value != '' %}="{{ value }}"{% endif %}{% endfor %}{% endif %}>
  <div class="tna-picture__image-wrapper tna-background-tint">
    <picture>
    {%- for source in params.sources -%}
      <source class="tna-picture__image" srcset="{{ source.src }}" type="{{ source.type }}" width="{{ source.width if source.width else params.width }}" height="{{ source.height if source.height else params.height }}"{%- if source.media %} media="{{ source.media }}"{% endif %}>
    {%- endfor -%}
      <img class="tna-picture__image" width="{{ params.width }}" height="{{ params.height }}" src="{{ params.src }}" alt="{{ params.alt }}" loading="lazy">
    </picture>
    {%- if params.information %}
    {{ tnaButton({
      'text': params.informationLabelOpen if params.informationLabelOpen else 'Open transcript',
      'small': True,
      'buttonElement': True,
      'classes': 'tna-picture__toggle-transcript tna-button--solid-hover',
      'attributes': {
        'aria-expanded': 'false',
        'hidden': ''
      }
    }) }}
    {%- endif %}
  </div>
{%- if params.information -%}
  <div class="tna-picture__transcript">
  {%- if params.information | length > 1 -%}
    {{ tnaTabs({
      'itemHeadingLevel': params.informationItemHeadingLevel,
      'items': params.information,
      'classes': 'tna-tabs--small'
    }) }}
  {%- else -%}
    {{ params.information[0].body | safe }}
  {%- endif -%}
  </div>
{%- endif -%}
{%- if params.caption -%}
  <figcaption class="tna-picture__caption">
      {{ params.caption | safe }}
  </figcaption>
{%- endif -%}
</figure>
{% endmacro %}