{# match, joker — icône joker en haut à gauche (avec KDO / bouclier) ; clic = détail #}
{% set joker_badge_title = 'Joker : ' ~ joker.name %}
{% if joker.target_team_name|default('') %}
    {% set joker_badge_title = joker_badge_title ~ ' → ' ~ joker.target_team_name %}
{% endif %}
{% if joker.effect_blocked|default(false) %}
    {% set joker_badge_title = joker_badge_title ~ ' (sans effet)' %}
{% endif %}
{% set joker_badge_hint = joker_badge_title ~ ' — Voir le détail' %}

<div
    class="match-card-joker-mark"
    data-joker-actions
    data-match-id="{{ match.id }}"
    data-match-label="{{ match.paysDomicile ? match.paysDomicile.nom : '?' }} — {{ match.paysExterieur ? match.paysExterieur.nom : '?' }}"
    data-joker-state-url="{{ path('app_match_jokers_state', { id: match.id }) }}"
    data-joker-place-url="{{ path('app_match_joker_place', { id: match.id }) }}"
    data-joker-remove-url="{{ path('app_match_joker_remove', { id: match.id }) }}"
>
    <button
        type="button"
        class="match-card-joker-mark__btn"
        data-joker-badge
        data-joker-badge-detail
        title="{{ joker_badge_hint }}"
        aria-label="{{ joker_badge_hint }}"
        aria-haspopup="dialog"
    >
        <span class="match-card-joker-mark__icon" aria-hidden="true">
            <i class="ti {{ joker_tabler_icon(joker.code|default('')) }}"></i>
        </span>
        <span class="sr-only">{{ joker_badge_title }}</span>
    </button>
</div>