{#

Usage:

  - css_class: (string)
    Possible set of classes in addition to `ecl-carousel` wrapper.

  - extra_attributes: (iterable)
    Conventional map of possible extra attributes for the wrapper.
    Pass any attribute, except: id, aria-labelledby

  - carousel_id: (string)
    The id of the carousel.
    Defaults to `ecl-carousel`.

  - carousel_aria_labelledby: (string)
    The value for `aria-labelledby` attribute for of heeading of the carousel.
    Defaults to `ecl-carousel__heading`.
    This value MUST be the same as `heading_id`.

  - heading_attributes: (iterable)
    Conventional map of possible extra attributes for the header.
    Pass any attribute, except: id, class.

  - heading_id: (string)
    The id of carousel heading.
    Defaults to `ecl-carousel__heading`.
    This value MUST be the same as `carousel_aria_labelledby`.

  - heading_title: (string)
    Carousel heading value.
    Defaults to `gallery`.

  - carousel_images (iterable)
    A list of images following the structure:

    {
      image: {
        src: '<path_to_image>',
        alt: 'Image item alt text',
      },
      download: {
        target: '#',
        title: 'Download',
        label: 'Download',
      },
      share: {
        target: '#',
        title: 'Share',
        label: 'Share',
      },
      description: (string or block).
      copyright: '© Copyright 1',
    }

#}

{# Internal properties #}

{% set _css_class = 'ecl-carousel' %}
{% set _extra_attributes = '' %}

{% set _carousel_id = carousel_id|default('ecl-carousel') %}
{% set _carousel_aria_labellby = carousel_aria_labellby|default('ecl-carousel__heading') %}
{% set _heading_id = heading_id|default('ecl-carousel__heading') %}
{% set _heading_title = heading_title|default('gallery') %}

{# Internal logic - Process properties #}

{# Carousel classes #}
{% if css_class is defined %}
  {% set _css_class = _css_class ~ ' ' ~ css_class %}
{% endif %}

{# Carousel attributes, except id and aria-labelledby #}
{% if extra_attributes is defined %}
  {% for attr in extra_attributes %}
    {% if attr != 'id' and attr != 'aria-labelledby' %}
      {% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name ~ '="' ~ attr.value ~ '"' %}
    {% endif %}
  {% endfor %}
{% endif %}

{# Carousel id and aria-labelledby connecting to heading #}
{% set _extra_attributes = _extra_attributes ~ ' ' ~ 'id="' ~ _carousel_id ~ '"' %}
{% set _extra_attributes = _extra_attributes ~ ' ' ~ 'aria-labelledby="' ~ _carousel_aria_labellby ~ '"' %}

{# Heading attributes except the id #}
{% if heading_attributes is defined %}
  {% for heading_attr in heading_attributes %}
    {% if heading_attr != 'id' %}
      {% set _heading_attributes = _heading_attributes ~ ' ' ~ heading_attr.name ~ '="' ~ heading_attr.value ~ '"' %}
    {% endif %}
  {% endfor %}
{% endif %}

{# Heading id #}
{% set _heading_attributes = _heading_attributes ~ 'id="' ~ _heading_id ~ '"' %}

{# Print result #}
<section class="{{ _css_class }}" {{ _extra_attributes|raw }}>
  <h3 class="ecl-headings ecl-headings--h3 ecl-u-sr-only" {{ _heading_attributes }} >{{ _heading_title }}</h3>
  <div class="ecl-carousel__list-wrapper">
    <ul class="ecl-carousel__list ecl-list--unstyled">
      {% for carousel_image in carousel_images %}
      <li class="ecl-carousel__item">
        <img src="{{ carousel_image.image.src }}" alt="{{ carousel_image.image.alt }}" class="ecl-carousel__image" />
      </li>
      {% endfor %}
    </ul>
  </div>
  <div class="ecl-carousel__live-region">
    {% for carousel_image in carousel_images %}
    <div class="ecl-carousel__image-information" data-image={{ loop.index0 }}>
      <div class="ecl-carousel__meta">
        <span class="ecl-carousel__meta-item ecl-carousel__meta-download">
          {% include '@ec-europa/ecl-links' with {
            'extra_classes': 'ecl-carousel__meta-link ecl-icon ecl-icon--download',
            'extra_attributes': [ 'name': 'title', 'value': carousel_image.download.title ],
            'variant': ['inverted', 'standalone'],
            }|merge(carousel_image.download)
          %}
        </span>
        <span class="ecl-carousel__meta-item ecl-carousel__meta-share">
          {% include '@ec-europa/ecl-links' with {
            'extra_classes': 'ecl-carousel__meta-link ecl-icon ecl-icon--share',
            'extra_attributes': [ 'name': 'title', 'value': carousel_image.share.title ],
            'variant': ['inverted', 'standalone'],
            }|merge(carousel_image.share)
          %}
        </span>
      </div>
      <div class="ecl-carousel__image-description">
        {% block description %}
          {{ carousel_image.description }}
        {% endblock %}
      </div>
      <div class="ecl-carousel__image-copyright">
        {{ carousel_image.copyright }}
      </div>
    </div>
    {% endfor %}
  </div>
</section>