{# @var entry array @var joker App\Entity\Joker #}
<li class="joker-catalog-list__item">
    <article class="joker-drawer__card joker-catalog-card" id="joker-{{ joker.code|replace({'_': '-'}) }}">
        <div class="joker-drawer__card-top">
            <div class="joker-drawer__card-visual">
                {% if joker.image %}
                    {% set joker_display_title = joker.title ?? joker.name %}
                    <button
                        type="button"
                        class="joker-catalog-card__image-btn"
                        data-joker-lightbox-open
                        data-joker-lightbox-src="{{ asset(joker.image) }}"
                        data-joker-lightbox-title="{{ joker_display_title }}"
                        aria-label="Agrandir l’image : {{ joker_display_title }}"
                    >
                        <img
                            src="{{ asset(joker.image) }}"
                            alt=""
                            class="joker-drawer__card-image"
                            loading="lazy"
                            decoding="async"
                        >
                        <span class="joker-catalog-card__zoom-hint" aria-hidden="true">
                            <i class="ti ti-zoom-in"></i>
                        </span>
                    </button>
                {% else %}
                    <span class="joker-drawer__card-placeholder" aria-hidden="true">
                        <i class="ti ti-wand"></i>
                    </span>
                {% endif %}
            </div>
            <div class="joker-drawer__card-copy">
                <h2 class="joker-drawer__card-title">{{ joker.title ?? joker.name }}</h2>
                {% if joker.description %}
                    <p class="joker-drawer__card-desc">{{ joker.description }}</p>
                {% endif %}
                <div class="joker-drawer__card-actions joker-catalog-card__actions">
                    <div class="joker-catalog-card__badges">
                        <span class="ta-badge joker-guide-badge joker-guide-badge--{{ entry.tag_css }}">{{ entry.tag_label }}</span>
                        {% if entry.already_used|default(false) %}
                            <span class="ta-badge joker-guide-badge joker-guide-badge--used">Déjà utilisé</span>
                        {% endif %}
                        {% if entry.irreversible %}
                            <span class="ta-badge joker-guide-badge joker-guide-badge--warn">Définitif</span>
                        {% endif %}
                        {% if entry.targets_opponent %}
                            <span class="ta-badge joker-guide-badge joker-guide-badge--target">Cible adverse</span>
                        {% endif %}
                    </div>
                    {% if entry.details is not empty %}
                        <div class="joker-catalog-card__technical">
                            <p class="joker-catalog-card__technical-label">Explications techniques</p>
                            <ul class="joker-guide-card-details joker-catalog-card__details">
                                {% for detail in entry.details %}
                                    <li>{{ detail }}</li>
                                {% endfor %}
                            </ul>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </article>
</li>