{# match_jokers: list from MatchJokerImpactExplanationBuilder #}
{% if match_jokers is not empty %}
    <section class="ta-card mt-5 match-live-jokers-section">
        <h2 class="ta-card-title">Jokers sur ce match</h2>
        <ul class="match-live-jokers-list">
            {% for joker in match_jokers %}
                <li class="match-live-jokers-list__item">
                    <div class="match-live-jokers-card{% if joker.neutralized %} match-live-jokers-card--neutralized{% endif %}">
                        <div class="match-live-jokers-card__head">
                            <span class="match-live-jokers-card__icon" aria-hidden="true">
                                <i class="ti {{ joker.icon }}"></i>
                            </span>
                            <h3 class="match-live-jokers-card__title">{{ joker.name }}</h3>
                        </div>
                        {% if joker.stories is not empty %}
                            <div class="match-live-jokers-card__stories">
                                {% for story in joker.stories %}
                                    <p class="match-live-jokers-card__story">{{ story }}</p>
                                {% endfor %}
                            </div>
                        {% endif %}
                        {% if joker.exampleLine|default(null) %}
                            <p class="match-live-jokers-card__example" data-joker-inversion-example>{{ joker.exampleLine }}</p>
                        {% endif %}
                    </div>
                </li>
            {% endfor %}
        </ul>
    </section>
{% endif %}