{% if documents %}

  <h2 id="documents" class="ecl-u-type-heading-2 ecl-u-mt-2xl ecl-u-mt-m-3xl ecl-u-mb-l">
    {{ documents|length == 1 ? "Document"|t : "Documents"|t }}
  </h2>

  {% for document in documents %}

    <div class="ecl-u-mt-m ecl-file" data-ecl-file="true">
      <div class="ecl-file__container">
        <svg class="ecl-icon ecl-icon--2xl ecl-icon--none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ url('<front>') }}themes/contrib/oe_theme/dist/eu/images/icons/sprites/icons.svg#{{ document.filemime }}"></use>
        </svg>
        <div class="ecl-file__info">
          <div class="ecl-file__title">{{ document.filename }}</div>
          <div class="ecl-file__language"></div>
          <div class="ecl-file__meta">({{ document.filesize }} KB - {{ document.extension }})</div>
        </div>
        <a download="{{ document.fileuri }}" href="{{ document.fileuri }}" class="ecl-file__download ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after">
          <span class="ecl-link__label">Download</span>&nbsp;
          <svg class="ecl-icon ecl-icon--fluid ecl-icon--none" focusable="false" aria-hidden="true">
            <use xlink:href="{{ url('<front>') }}themes/contrib/oe_theme/dist/eu/images/icons/sprites/icons.svg#download"></use>
          </svg>
        </a>
      </div>
    </div>
  {% endfor %}

{% endif %}