<cor-document class="cor-document">
  <span class="cor-document__header">
    <h3 class="cor-document__title margin-0">{{ document.title }}</h3>
    {% if document.author %}<span class="cor-document__author">Author: <strong>{{ document.author }}</strong></span>{% endif %}
    {% if document.date %}<span class="cor-document__date">Date: <strong>{{ document.date }}</strong></span>{% endif %}
    {% if document.themes %}
      <span class="cor-document__themes">Themes: {% for theme in document.themes %}{{ theme }}{% endfor %}</span>
    {% endif %}
  </span>
  <div class="cor-document__info">
    {% if document.cover %}
    <img class="block" src="{{ document.cover }}" alt="alt text" />
    {% endif %}

    {% if document.description %}
    <p>{{ document.description }}</p>
    {% endif %}

  </div>
  <div class="cor-document__footer">
    <strong class="cor-document__language">{{ document.language }}</strong>
    <span class="cor-document__translations__item__info">({{ document.size }} - {{ document.type }})</span>
    <a href="test.be" class="cor-document__translations__item__link">Download</a>
  </div>
  {% if document.translations %}
  <cor-expander class="cor-document__translations margin-top-3xs">
    <a href="test.be" class="cor-document__translations__btn">Other languages ({{ document.translations| length }})</a>
    <ol class="cor-document__translations__list margin-y">
      {% for translation in document.translations %}
      <li class="cor-document__translations__item">
        <div class="flex gap">
          <strong class="cor-document__translations__item__language">{{ translation.language }}</strong>
          <span class="cor-document__translations__item__info">({{ translation.size }} - {{ translation.type }})</span>
          <a href="test.be" class="cor-document__translations__item__link margin-left-auto">Download</a>
        </div>
        <span class="cor-document__translations__item__title">{{ translation.title }}</span>
      </li>
      {% endfor %}
    </ol>
    <span>Looking for another language which is not on the list? <a href="test.be">Find out why</a>.</span>
  </cor-expander>
  {% endif %}
</cor-document>

<script src="/components/expander/expander.js" type="module"></script>
