{% extends 'base.html.twig' %}

{% block title %}Jokers | LPF 2026{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('css/joker-match-drawer.css') }}?v=7">
    <link rel="stylesheet" href="{{ asset('css/joker-catalog.css') }}?v=14">
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('js/joker-catalog.js') }}?v=1" defer></script>
{% endblock %}

{% block body %}
    <section class="ta-topbar joker-guide-topbar">
        <h1 class="ta-page-title">Guide des jokers</h1>
        <p class="ta-page-subtitle">
            Chaque équipe dispose de jokers uniques. Retrouvez ici le détail de chaque carte.
        </p>
    </section>

    <details class="ta-card joker-guide-rules-card joker-guide-rules-accordion">
        <summary class="joker-guide-rules-summary">
            <span class="joker-guide-rules-summary-text">
                <i class="ti ti-list-check" aria-hidden="true"></i>
                Règles communes
            </span>
            <i class="ti ti-chevron-down joker-guide-chevron" aria-hidden="true"></i>
        </summary>
        <ul class="joker-guide-rules-list">
            <li>Chaque type de joker ne peut être utilisé qu’<strong>une seule fois</strong> par équipe sur toute la compétition.</li>
            <li><strong>Un joker par match</strong> : vous pouvez planifier des jokers différents sur plusieurs matchs à venir en même temps.</li>
            <li><strong>Équipe favorite</strong> : le pays se choisit dans <a href="{{ path('app_account') }}#tab-equipe">Mon compte → Mon équipe</a>, avant le début de la compétition uniquement.</li>
            <li>Les jokers se posent sur un <strong>match à venir</strong>, avant le coup d’envoi (retirables sauf mention contraire).</li>
            <li>La cotisation de l’équipe doit être réglée pour gérer les jokers.</li>
            <li>Les jokers <strong>offensifs</strong> (pique, inversions) peuvent être neutralisés si la cible est protégée : le joker est alors consommé sans effet sur elle.</li>
        </ul>
    </details>

    {% if joker_catalog is not empty or interactions_guide is defined %}
        <nav class="joker-guide-toc ta-card" aria-label="Sommaire du guide">
            <h2 class="joker-guide-toc__title">Sommaire</h2>
            {% if joker_catalog is not empty %}
                <div class="joker-guide-toc__group">
                    <p class="joker-guide-toc__label">Fiches jokers</p>
                    <ul class="joker-guide-toc__list">
                        {% for entry in joker_catalog %}
                            {% set code = entry.joker.code %}
                            {% if code %}
                                <li>
                                    <a href="#joker-{{ code|replace({'_': '-'}) }}">{{ entry.joker.displayTitle }}</a>
                                </li>
                            {% endif %}
                        {% endfor %}
                    </ul>
                </div>
            {% endif %}
            {% if interactions_guide is defined %}
                <div class="joker-guide-toc__group">
                    <p class="joker-guide-toc__label">Interactions</p>
                    <ul class="joker-guide-toc__list">
                        <li><a href="#guide-interactions">Vue d’ensemble</a></li>
                        <li><a href="#guide-pipeline">Ordre de calcul (pronos)</a></li>
                        <li><a href="#guide-cross-matrix">Tableau croisé</a></li>
                        {% for item in interactions_guide.toc %}
                            {% if item.group == 'detail' %}
                                <li><a href="#{{ item.id }}">{{ item.label }}</a></li>
                            {% endif %}
                        {% endfor %}
                    </ul>
                </div>
            {% endif %}
        </nav>
    {% endif %}

    {% if joker_catalog is empty %}
        <section class="ta-card">
            <p class="ta-card-text">Aucun joker actif pour le moment.</p>
        </section>
    {% else %}
        <ul class="joker-catalog-list" role="list">
            {% for entry in joker_catalog %}
                {% include 'competition/_joker_catalog_card.html.twig' with {
                    entry: entry,
                    joker: entry.joker,
                } only %}
            {% endfor %}
        </ul>

        <dialog
            id="joker-catalog-lightbox"
            class="joker-catalog-lightbox"
            aria-labelledby="joker-catalog-lightbox-caption"
        >
            <div class="joker-catalog-lightbox__panel" role="document">
                <button
                    type="button"
                    class="joker-catalog-lightbox__close"
                    data-joker-lightbox-close
                    aria-label="Fermer"
                >
                    <i class="ti ti-x" aria-hidden="true"></i>
                </button>
                <figure class="joker-catalog-lightbox__figure">
                    <img
                        src=""
                        alt=""
                        class="joker-catalog-lightbox__image"
                        data-joker-lightbox-image
                        decoding="async"
                    >
                    <figcaption
                        id="joker-catalog-lightbox-caption"
                        class="joker-catalog-lightbox__caption"
                        data-joker-lightbox-caption
                    ></figcaption>
                </figure>
            </div>
        </dialog>

    {% endif %}

    {% if interactions_guide is defined %}
        {% include 'competition/_joker_guide_interactions.html.twig' with {
            interactions_guide: interactions_guide,
        } only %}
    {% endif %}
{% endblock %}