{# espion_intel: { cotes, team_pronostics, jokers } — contenu injecté dans la popup #}
<p class="match-espion-irreversible">Joker définitif — non annulable.</p>

<div class="match-espion-section">
    <h4 class="match-espion-section-title">Cotes du match</h4>
    {% include 'competition/_match_cotes_overview.html.twig' with { cotes: espion_intel.cotes } only %}
</div>

<div class="match-espion-section">
    <h4 class="match-espion-section-title">Pronostics des équipes</h4>
    {% if espion_intel.team_pronostics is not empty %}
        <div class="match-espion-table-wrap">
            <table class="match-espion-jokers-table match-espion-pronos-table">
                <thead>
                    <tr>
                        <th scope="col">Équipe</th>
                        <th scope="col">Scores pronostiqués</th>
                    </tr>
                </thead>
                <tbody>
                    {% for row in espion_intel.team_pronostics %}
                        <tr>
                            <td class="match-espion-jokers-table__team">
                                {% if row.team_logo %}
                                    <img src="{{ asset(row.team_logo) }}" alt="" class="match-espion-team-logo" width="24" height="24" loading="lazy">
                                {% endif %}
                                <span class="match-espion-team-name">{{ row.team_name }}</span>
                            </td>
                            <td class="match-espion-pronos-table__scores">
                                {% for player in row.players %}
                                    <span class="match-espion-prono-line">
                                        <strong>{{ player.nickname }}</strong>
                                        {{ player.score_home }} - {{ player.score_away }}
                                    </span>
                                {% endfor %}
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {% else %}
        <p class="match-espion-empty">Aucun pronostic enregistré sur ce match pour le moment.</p>
    {% endif %}
</div>

<div class="match-espion-section">
    <h4 class="match-espion-section-title">Jokers posés</h4>
    {% if espion_intel.jokers is not empty %}
        <div class="match-espion-table-wrap">
            <table class="match-espion-jokers-table">
                <thead>
                    <tr>
                        <th scope="col">Équipe</th>
                        <th scope="col">Joker · cible</th>
                    </tr>
                </thead>
                <tbody>
                    {% for row in espion_intel.jokers %}
                        <tr>
                            <td class="match-espion-jokers-table__team">
                                {% if row.team_logo %}
                                    <img src="{{ asset(row.team_logo) }}" alt="" class="match-espion-team-logo" width="24" height="24" loading="lazy">
                                {% endif %}
                                <span class="match-espion-team-name">{{ row.team_name }}</span>
                            </td>
                            <td class="match-espion-jokers-table__joker">
                                <div class="match-espion-joker-line">
                                    <span class="match-espion-joker-icon" aria-hidden="true">
                                        {% if row.joker_image %}
                                            <img
                                                src="{{ asset(row.joker_image) }}"
                                                alt=""
                                                width="28"
                                                height="36"
                                                loading="lazy"
                                                decoding="async"
                                            >
                                        {% else %}
                                            <i class="ti {{ joker_tabler_icon(row.joker_code) }}"></i>
                                        {% endif %}
                                    </span>
                                    <span class="match-espion-joker-label">{{ row.joker_name }}</span>
                                    {% if row.target_team_name %}
                                        <span class="match-espion-target">→ {{ row.target_team_name }}</span>
                                    {% endif %}
                                    {% if row.effect_blocked|default(false) %}
                                        <span class="match-espion-blocked">(sans effet)</span>
                                    {% endif %}
                                </div>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {% else %}
        <p class="match-espion-empty">Aucun joker posé sur ce match pour le moment.</p>
    {% endif %}
</div>