{#
  Common parameters:
    - "variant" (string): can be 'translations', 'links', 'images', 'videos' or empty
    - "extra_classes" (string): extra CSS classes to be added
    - "extra_attributes" (array): extra attributes classes (optional, format: [{ 'name': 'name_of_the_attribute', 'value': 'value_of_the_attribute'}])

  Default parameters:
    - "title" (string): title of the file (default: empty)
    - "language" (string): language of the file (default: empty)
    - "meta" (string): additional information concerning the file: size, type, number of page (default: empty)
    - "button_label" (string): label of the download button (default: "Download")
    - "icon" (string): icon corresponding to the file type. Should be one of ecl-icons (default: empty)

  Translations variant parameters:
    - "title" (string): title of the file (default: empty)
    - "language" (string): language of the file (default: empty)
    - "meta" (string): additional information concerning the file: size, type, number of page (default: empty)
    - "button_label" (string): label of the download button (default: "Download")
    - "icon" (string): icon corresponding to the file type. Should be one of ecl-icons (default: empty)
    - "translations" (array) [{
      - "title" (string): title of the translated file (default: empty)
      - "meta" (string): additional information concerning the translated file: size, type, number of page (default: empty)
    }]
    - "translations_label" (string): global label for translations area. Shoud display number of translations (default: "Available languages: 0")
    - "translations_tooltip" (string): tooltip when hovering global label (default: "Click to see translations")

  Links variant parameters:
    - "links" (array): [{
      - "title" (string): title of the link (default: empty)
      - "icon" (string): icon corresponding to the file type. Should be one of ecl-icons (default: empty)
      - "href" (string): target of the link (default: empty)
      - "is_external" (boolean): is the link an external link or not (default: false)
      - "type" (string): (optional) extension of the file (default: empty)
    }]

  Images variant parameters:
    - "src" (string): source of the image (default: empty)
    - "alt" (string): alternative text for the image (default: empty)
    - "caption" (string): description of the image (default: empty)

  Videos variant parameters:
    - "src" (string): source of the video (default: empty)
    - "caption" (string): description of the video (default: empty)
    - "is_iframe" (boolean): video is displayed in an iframe or not (default: false)
    - "ratio" (string): ratio of the video. Should be one of ecl-ratio. Format: '16-9' (default: empty)
#}

{# Internal properties #}

{% set _button_label = button_label|default('Download') %}
{% set _translations_label = translations_label|default('Available languages: 0') %}
{% set _translations_tooltip = translations_tooltip|default('Click to see translations') %}
{% set _css_class = 'ecl-file' %}
{% set _extra_attributes = '' %}

{# Internal logic - Process properties #}

{% if variant is not empty %}
  {% set _css_class = _css_class ~ ' ecl-file--' ~ variant %}
{% endif %}

{% if extra_classes is defined %}
  {% set _css_class = _css_class ~ ' ' ~ extra_classes %}
{% endif %}

{% if extra_attributes is defined %}
  {% for attr in extra_attributes %}
    {% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name ~ '="' ~ attr.value ~ '"' %}
  {% endfor %}
{% endif %}

{# Print result #}

{% if variant is defined %}

  {% if variant == "translation" %}

<!-- Translations -->
<section class="{{ _css_class }}"{{ _extra_attributes|raw }}>
  <div class="ecl-file__body">
    <div class="ecl-row">
      <div class=" ecl-col ecl-col-md-8">
        <span class="ecl-icon ecl-icon--{{ icon }} ecl-file__icon"></span>
        <div class="ecl-file__metadata">
          <div class="ecl-file__title">{{ title }}</div>
          <div class="ecl-file__info">
            <span class="ecl-file__language">{{ language }}</span> ({{ meta }})
          </div>
        </div>
      </div>

      <div class="ecl-col-12 ecl-col-md-4">
        {% include '@ec-europa/ecl-buttons' with {
          'label': _button_label ~ '<span class="ecl-u-sr-only">(' ~ meta ~ ')',
          'is_block': true,
          'extra_classes': 'ecl-file__download',
          'extra_attributes': [{ 'name': 'type', 'value': 'button' }]
        } %}
      </div>
    </div>
  </div>

  <div class="ecl-file__translations">
    {% include '@ec-europa/ecl-buttons' with {
      'label': translations_label,
      'modifier': 'secondary',
      'extra_classes': 'ecl-file__translations-toggle',
      'extra_attributes': [
        { 'name': 'aria-controls', 'value': 'translations-expand' },
        { 'name': 'aria-expanded', 'value': 'true' },
        { 'name': 'id', 'value': 'translations-expand-button' },
        { 'name': 'type', 'value': 'button' },
        { 'name': 'title', 'value': translations_tooltip }
      ]
    } %}

    <div aria-hidden="false" aria-labelledby="translations-expand-button" id="translations-expand">
      <ul class="ecl-file__translations-list">
        {% if translations is defined %}
          {% for translation in translations %}
            <li class="ecl-file__translations-item">
              <div class="ecl-file__translations-metadata">
                <span class="ecl-file__translations-title">{{ translation.title }}</span>
                <div class="ecl-file__translations-info">({{ translation.meta }})</div>
              </div>
              {% include '@ec-europa/ecl-buttons' with {
                'label': _button_label ~ '<span class="ecl-u-sr-only">(' ~ translation.meta ~ ')',
                'modifier': 'secondary',
                'extra_classes': 'ecl-file__translations-download',
                'extra_attributes': [{ 'name': 'type', 'value': 'button' }]
              } %}
            </li>
          {% endfor %}
        {% endif %}
      </ul>
    </div>
  </div>
</section>

  {% elseif variant == "link" %}

<!-- Links -->
<section class="{{ _css_class }}"{{ _extra_attributes|raw }}>
  {% if links is defined %}
    {% for link in links %}
      <a
        href="{{ link.href }}"
        class="ecl-link ecl-file__link {% if link.is_external is defined and link.is_external %}ecl-link--external{% endif %}">
        <span class="ecl-icon ecl-icon--{{ link.icon }} ecl-file__icon"></span>
        <span class="ecl-file__title">{{ link.title }}</span>
        {% if link.type is defined %}
        <span class="ecl-file__type">{{ link.type }}</span>
        {% endif %}
      </a>
    {% endfor %}
  {% endif %}
</section>

  {% elseif variant == "image" %}

<!-- Images -->
<section class="{{ _css_class }}"{{ _extra_attributes|raw }}>
  <img class="ecl-file__image" src="{{ src }}" alt="{{ alt }}">
  <div class="ecl-file__caption">{{ caption }}</div>
</section>

  {% elseif variant == "video" %}

<!-- Videos -->
<section class="{{ _css_class }}"{{ _extra_attributes|raw }}>
  {% if src is defined %}
    {% if is_iframe is defined and is_iframe %}
  <div {% if ratio is defined %} class="ecl-u-ratio-{{ ratio }}" {% endif %}>
    <iframe class="ecl-file__video" src="{{ src }}" allowfullscreen="allowfullscreen" scrolling="no"></iframe>
  </div>
    {% else %}
  <div {% if ratio is defined %} class="ecl-u-ratio-{{ ratio }}" {% endif %}>
    <video class="ecl-file__video" src="{{ src }}" type="video/mp4" controls="controls"></video>
  </div>
    {% endif %}
  {% endif %}
  <div class="ecl-file__caption">{{ caption }}</div>
</section>

  {% endif %}

{% else %}

<!-- Default -->
<section class="{{ _css_class }}"{{ _extra_attributes|raw }}>
  <div class="ecl-file__body">
    <div class="ecl-row">
      <div class=" ecl-col ecl-col-md-8">
        <span class="ecl-icon ecl-icon--{{ icon }} ecl-file__icon"></span>
        <div class="ecl-file__metadata">
          <div class="ecl-file__title">{{ title }}</div>
          <div class="ecl-file__info">
            <span class="ecl-file__language">{{ language }}</span> ({{ meta }})
          </div>
        </div>
      </div>

      <div class="ecl-col-12 ecl-col-md-4">
        {% include '@ec-europa/ecl-buttons' with {
          'label': _button_label ~ '<span class="ecl-u-sr-only">(' ~ meta ~ ')',
          'is_block': true,
          'extra_classes': 'ecl-file__download',
          'extra_attributes': [{ 'name': 'type', 'value': 'button' }]
        } %}
      </div>
    </div>
  </div>
</section>

{% endif %}