{% import "macros.html.twig" as macros %}

{% for collection in collections %}
    <div class="collection-element element" data-title="{{ collection.title }}">
        <a class="collection-circle-thumbnail" href="{{ path('app_collection_show'|applyContext, {'id': collection.id}) }}" aria-label="{{ 'aria.collection'|trans({'%title%': collection.title}) }}">
            {% if collection.image != null %}
                {{ macros.lazyImage(collection.image, null, null, 'placeholder--circle') }}
            {% else %}
                <span class="color-avatar circle avatar color-{{ collection.color }}">{{ collection.title|first|upper }}</span>
            {% endif %}
        </a>
        <span class="collection-title">{{ collection.title|u.truncate(27) }}</span>
        <p class="collection-stats">
            {{ 'counter.item'|trans({'%count%': getCounters(collection).items}) }}
        </p>
    </div>
{% endfor %}