{% load static %}
{% load unicms_templates %}

{% random_id as id %}

{% with collection.get_items as collection_items %}
{% if collection_items %}
<div id="collapseDiv-{{ id }}-lft" class="accordion accordion-left-icon">

    <div class="accordion-item">
        <div class="accordion-header" id="heading-{{ id }}-lft">
            <button class="accordion-button"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#collapse-{{ id }}-lft"
                    aria-expanded="false"
                    aria-controls="collapse-{{ id }}-lft">
                {{ collection.name }}
            </button>
        </div>
        <div id="collapse-{{ id }}-lft"
             class="accordion-collapse collapse"
             role="region"
             data-bs-parent="#collapseDiv-{{ id }}-lft"
             aria-labelledby="heading-{{ id }}-lft">
            <div class="accordion-body">
                <ul class="list-unstyled">
                    {% for item in collection_items %}
                    <li class="mb-2">
                        <a class="left-icon"
                           href="{{ item.media.get_media_path }}">
                            <svg class="icon icon-secondary">
                                <use xlink:href="{% static 'svg/sprites.svg' %}#it-file"></use>
                            </svg>
                            <span>
                                {{ item.media.title }}
                            </span>
                        </a>
                        <br>
                        <span class="text-muted small ms-4 ps-2">
                            {{ item.media.description }}
                        </span>
                        <br>
                        <span class="text-muted small ms-4 ps-2">
                            [{{ item.media.file_type }} - {{ item.media.file_size_kb }} KB]
                        </span>
                    </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
</div>
{% endif %}
{% endwith %}
