{% 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="collapse-div collapse-left-icon"
     role="tablist">

    <div class="collapse-header" id="heading-{{ id }}-lft">
        <button data-toggle="collapse"
                data-target="#collapse-{{ id }}-lft"
                aria-expanded="false"
                aria-controls="collapse-{{ id }}-lft">
            {{ collection.name }}
        </button>
    </div>
    <div id="collapse-{{ id }}-lft"
         class="collapse"
         role="tabpanel"
         aria-labelledby="heading-{{ id }}-lft">
        <div class="collapse-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/sprite.svg' %}#it-file"></use>
                        </svg>
                        <span>
                            {{ item.media.title }}
                        </span>
                    </a>
                    <br>
                    <span class="text-muted small ml-4 pl-2">
                        {{ item.media.description }}
                    </span>
                    <br>
                    <span class="text-muted small ml-4 pl-2">
                        [{{ item.media.file_type }} - {{ item.media.file_size_kb }} KB]
                    </span>
                </li>
                {% endfor %}
            </ul>
        </div>
    </div>

</div>
{% endif %}
{% endwith %}
