{# @var title string #}
{# @var scope array #}
{# @var scope_key string #}
{% if scope.sections is not empty %}
    <div class="badge-collection-scope" id="badge-collection-{{ scope_key }}">
        <div class="badge-collection-scope__head">
            <h3 class="badge-section-subtitle">{{ title }}</h3>
            <p class="badge-collection-progress">
                <span class="badge-collection-progress__value">{{ scope.earned }}/{{ scope.total }}</span>
                débloqués
            </p>
        </div>

        <ul class="badge-collection-grid">
            {% for section in scope.sections %}
                {% for slot in section.slots %}
                    {% set slot_classes = 'badge-slot' ~ (slot.earned ? ' badge-slot--earned' : ' badge-slot--locked') ~ (slot.ironic ? ' badge-slot--ironic' : '') ~ (slot.outcome == 'positive' ? ' badge-slot--positive' : (slot.outcome == 'negative' ? ' badge-slot--negative' : '')) %}
                    <li class="badge-collection-grid__item">
                        {% if slot.earned %}
                            <button
                                type="button"
                                class="{{ slot_classes }} badge-slot--interactive"
                                data-lpf-lightbox-open
                                data-lpf-lightbox-theme="badge"
                                {% if slot.image %}data-lpf-lightbox-src="{{ asset(slot.image)|e('html_attr') }}"{% endif %}
                                data-lpf-lightbox-title="{{ slot.name|e('html_attr') }}"
                                {% if slot.flavorText %}data-lpf-lightbox-description="{{ slot.flavorText|e('html_attr') }}"{% endif %}
                                aria-label="Voir le badge {{ slot.name }}"
                            >
                                <span class="badge-slot__media">
                                    {% if slot.image %}
                                        <img src="{{ asset(slot.image) }}" alt="" class="badge-slot__image" width="200" height="200" loading="lazy" decoding="async">
                                    {% else %}
                                        <span class="badge-slot__icon" aria-hidden="true">
                                            <i class="ti {{ slot.icon ?? 'ti-medal' }}"></i>
                                        </span>
                                    {% endif %}
                                </span>
                                <span class="badge-slot__body">
                                    <span class="badge-slot__name">{{ slot.name }}</span>
                                </span>
                            </button>
                        {% else %}
                            <div class="{{ slot_classes }}" aria-hidden="true">
                                <div class="badge-slot__media badge-slot__media--locked">
                                    {% if slot.image %}
                                        <img src="{{ asset(slot.image) }}" alt="" class="badge-slot__image badge-slot__image--locked" width="200" height="200" loading="lazy" decoding="async">
                                    {% elseif slot.icon %}
                                        <span class="badge-slot__icon badge-slot__icon--locked">
                                            <i class="ti {{ slot.icon }}"></i>
                                        </span>
                                    {% else %}
                                        <span class="badge-slot__lock"><i class="ti ti-lock"></i></span>
                                    {% endif %}
                                </div>
                            </div>
                        {% endif %}
                    </li>
                {% endfor %}
            {% endfor %}
        </ul>
    </div>
{% endif %}