{# @var team_joker_overview list<array{joker: Joker, status: string, status_label: string}> #}
<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-1 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
        </a>
    </div>
    <p class="ta-card-text mb-4">
        Chaque joker ne peut être utilisé qu’<strong>une fois</strong> par équipe.
    </p>

    {% set joker_rows = team_joker_overview|filter(row => row.joker.code != constant('App\\Entity\\Joker::CODE_EQUIPE_FAVORITE')) %}

    {% if joker_rows is empty %}
        <p class="ta-card-text">Aucun joker configuré pour le moment.</p>
    {% else %}
        <div class="overflow-x-auto">
            <table class="table table-sm team-jokers-table">
                <thead>
                    <tr>
                        <th class="team-jokers-table__col-image" scope="col"><span class="sr-only">Image</span></th>
                        <th scope="col">Joker</th>
                        <th class="team-jokers-table__col-status text-center" scope="col">État</th>
                    </tr>
                </thead>
                <tbody>
                    {% for row in joker_rows %}
                        {% set joker = row.joker %}
                        {% set is_used = row.status == 'used' %}
                        {% set is_available = row.status == 'available' %}
                        <tr class="team-jokers-table__row team-jokers-table__row--{{ row.status }}">
                            <td class="team-jokers-table__col-image">
                                {% if joker.image %}
                                    <img src="{{ asset(joker.image) }}" alt="" class="team-jokers-table__thumb" width="36" height="36" loading="lazy">
                                {% else %}
                                    <span class="team-jokers-table__thumb team-jokers-table__thumb--placeholder" aria-hidden="true">
                                        <i class="ti {{ joker.getTablerIconClass() }}"></i>
                                    </span>
                                {% endif %}
                            </td>
                            <td class="team-jokers-table__name">{{ joker.displayTitle }}</td>
                            <td class="team-jokers-table__col-status text-center">
                                {% if is_available %}
                                    <span class="team-jokers-table__status team-jokers-table__status--available" title="Disponible" aria-label="Disponible">
                                        <i class="ti ti-circle-check" aria-hidden="true"></i>
                                    </span>
                                {% elseif is_used %}
                                    <span class="team-jokers-table__status team-jokers-table__status--used" title="Utilisé" aria-label="Utilisé">
                                        <i class="ti ti-circle-x" aria-hidden="true"></i>
                                    </span>
                                {% else %}
                                    <span class="team-jokers-table__status team-jokers-table__status--inactive" title="{{ row.status_label }}" aria-label="{{ row.status_label }}">
                                        <i class="ti ti-lock" aria-hidden="true"></i>
                                    </span>
                                {% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {% endif %}
</section>