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

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