{# @var team_joker_overview list #}
<section class="account-card-jokers rounded-box border border-base-300 bg-base-100 p-5 shadow-sm">
    <div class="account-jokers-head">
        <h2 class="mb-2 text-lg font-semibold">Jokers de l’équipe</h2>
        <a href="{{ path('app_jokers') }}" class="btn btn-outline btn-sm account-jokers-guide-link">
            <i class="ti ti-book-2" aria-hidden="true"></i>
            Guide des jokers
        </a>
    </div>
    <p class="ta-card-text mb-4">
        Chaque joker ne peut être utilisé qu’<strong>une fois</strong> par équipe.
        Vous pouvez en planifier plusieurs sur des <strong>matchs différents</strong> (un seul joker par match).
        L’<strong>équipe favorite</strong> (pays) se choisit dans la section dédiée ci-dessus, avant le début de la compétition.
    </p>

    {% if team_joker_overview is empty %}
        <p class="ta-card-text">Aucun joker configuré pour le moment.</p>
    {% else %}
        <ul class="joker-overview-list">
            {% for row in team_joker_overview %}
                {% set joker = row.joker %}
                {% set usage = row.usage %}
                <li class="joker-overview-item joker-overview-item--{{ row.status }}">
                    <div class="joker-overview-media">
                        {% if joker.image %}
                            <img src="{{ asset(joker.image) }}" alt="" class="joker-overview-image" width="56" height="56" loading="lazy">
                        {% else %}
                            <span class="joker-overview-image-placeholder" aria-hidden="true">
                                <i class="ti ti-wand"></i>
                            </span>
                        {% endif %}
                    </div>
                    <div class="joker-overview-body">
                        <div class="joker-overview-head">
                            <h3 class="joker-overview-name">{{ joker.title ?? joker.name }}</h3>
                            <span class="ta-badge joker-overview-badge joker-overview-badge--{{ row.status }}">{{ row.status_label }}</span>
                        </div>
                        {% if joker.description %}
                            <p class="joker-overview-desc">{{ joker.description }}</p>
                        {% endif %}
                        {% if row.favorite_country_name %}
                            <p class="joker-overview-usage">
                                Sélection : <strong>{{ row.favorite_country_name }}</strong> (choix secret, enregistré sur le compte équipe).
                            </p>
                        {% elseif usage %}
                            {% set um = usage.match %}
                            <p class="joker-overview-usage">
                                Posé sur
                                <strong>{{ um.paysDomicile ? um.paysDomicile.nom : '?' }} — {{ um.paysExterieur ? um.paysExterieur.nom : '?' }}</strong>
                                {% if um.dateHeure %}
                                    ({{ um.dateHeure|fr_match_datetime }})
                                {% endif %}
                                {% if usage.targetTeam %}
                                    · cible <strong>{{ usage.targetTeam.name }}</strong>
                                {% endif %}
                                · le {{ usage.placedAt|date('d/m/Y H:i') }}
                            </p>
                        {% endif %}
                    </div>
                </li>
            {% endfor %}
        </ul>
    {% endif %}
</section>