{# @var player_badges list #}
{# @var team_badges list #}
{# @var badges_design_preview bool #}
{% if badges_design_preview or player_badges is not empty or team_badges is not empty %}
<section class="account-card-badges rounded-box border border-base-300 bg-base-100 p-5 shadow-sm">
    <div class="badge-section-head">
        <div>
            <h2 class="mb-2 text-lg font-semibold">Badges</h2>
            <p class="ta-card-text mb-0">
                {% if badges_design_preview %}
                    Aperçu design — catalogue complet (visible uniquement sur ton compte admin).
                {% else %}
                    Récompenses débloquées pendant la compétition.
                {% endif %}
            </p>
        </div>
        {% if badges_design_preview %}
            <span class="badge-preview-pill">Preview design</span>
        {% endif %}
    </div>

    {% if player_badges is not empty %}
        <h3 class="badge-section-subtitle">Joueur <span class="badge-section-count">{{ player_badges|length }}</span></h3>
        <ul class="badge-grid mb-5">
            {% for badge in player_badges %}
                <li class="badge-card{% if badge.ironic %} badge-card--ironic{% endif %}{% if badge.outcome == 'positive' %} badge-card--positive{% elseif badge.outcome == 'negative' %} badge-card--negative{% endif %}">
                    {% if badge.image %}
                        <span class="badge-card__media">
                            <img src="{{ asset(badge.image) }}" alt="" class="badge-card__image" width="64" height="64" loading="lazy">
                        </span>
                    {% else %}
                        <span class="badge-card__icon" aria-hidden="true">
                            <i class="ti {{ badge.icon ?? 'ti-medal' }}"></i>
                        </span>
                    {% endif %}
                    <div class="badge-card__body">
                        <p class="badge-card__name">{{ badge.name }}</p>
                        {% if badge.flavorText %}
                            <p class="badge-card__flavor">{{ badge.flavorText }}</p>
                        {% endif %}
                        <p class="badge-card__meta">
                            {{ badge.category }}
                            {% if not badges_design_preview %}
                                · {{ badge.awardedAt|date('d/m/Y') }}
                            {% endif %}
                        </p>
                    </div>
                </li>
            {% endfor %}
        </ul>
    {% endif %}

    {% if team_badges is not empty %}
        <h3 class="badge-section-subtitle">Équipe <span class="badge-section-count">{{ team_badges|length }}</span></h3>
        <ul class="badge-grid">
            {% for badge in team_badges %}
                <li class="badge-card{% if badge.ironic %} badge-card--ironic{% endif %}{% if badge.outcome == 'positive' %} badge-card--positive{% elseif badge.outcome == 'negative' %} badge-card--negative{% endif %}">
                    {% if badge.image %}
                        <span class="badge-card__media">
                            <img src="{{ asset(badge.image) }}" alt="" class="badge-card__image" width="64" height="64" loading="lazy">
                        </span>
                    {% else %}
                        <span class="badge-card__icon" aria-hidden="true">
                            <i class="ti {{ badge.icon ?? 'ti-medal' }}"></i>
                        </span>
                    {% endif %}
                    <div class="badge-card__body">
                        <p class="badge-card__name">{{ badge.name }}</p>
                        {% if badge.flavorText %}
                            <p class="badge-card__flavor">{{ badge.flavorText }}</p>
                        {% endif %}
                        <p class="badge-card__meta">
                            {{ badge.category }}
                            {% if not badges_design_preview %}
                                · {{ badge.awardedAt|date('d/m/Y') }}
                            {% endif %}
                        </p>
                    </div>
                </li>
            {% endfor %}
        </ul>
    {% endif %}
</section>
{% endif %}