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

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

{% block body %}
    <section class="ta-topbar">
        <div>
            <h1 class="ta-page-title">Buteurs</h1>
            <p class="ta-page-subtitle">
                Buteurs choisis par les joueurs : cote actuelle, buts marqués, points par but et équipes concernées.
            </p>
        </div>
    </section>

    <section class="ta-card buteurs-index-card">
        <div class="ta-dashboard-matchdays-head">
            <div>
                <h2 class="ta-card-title">Tableau des buteurs</h2>
                <p class="ta-card-text">
                    La cote dépend du nombre de joueurs ayant choisi le même buteur (1 joueur = ×5, 8+ = ×1).
                </p>
            </div>
            {% if has_buteurs %}
                <span class="ta-badge ta-badge-success">{{ buteur_rows|length }} buteur{{ buteur_rows|length > 1 ? 's' : '' }}</span>
            {% endif %}
        </div>

        {% if has_buteurs %}
            <div class="ta-table-wrap ranking-table-wrap mt-5 overflow-x-auto">
                <table class="table ta-table ranking-table buteurs-index-table" data-ranking-table>
                    <thead>
                        <tr>
                            <th scope="col" class="ta-num">
                                <button type="button" class="ranking-table-sort" data-sort-key="rank" data-sort-type="number">
                                    #
                                    <i class="ti ti-chevron-down ranking-table-sort__icon" aria-hidden="true"></i>
                                </button>
                            </th>
                            <th scope="col">
                                <button type="button" class="ranking-table-sort" data-sort-key="team" data-sort-type="text">
                                    Buteur
                                    <i class="ti ti-chevron-down ranking-table-sort__icon" aria-hidden="true"></i>
                                </button>
                            </th>
                            <th scope="col">Pays</th>
                            <th scope="col" class="ta-num">
                                <button type="button" class="ranking-table-sort" data-sort-key="cote" data-sort-type="number">
                                    Cote
                                    <i class="ti ti-chevron-down ranking-table-sort__icon" aria-hidden="true"></i>
                                </button>
                            </th>
                            <th scope="col" class="ta-num">
                                <button type="button" class="ranking-table-sort" data-sort-key="goals" data-sort-type="number">
                                    Buts
                                    <i class="ti ti-chevron-down ranking-table-sort__icon" aria-hidden="true"></i>
                                </button>
                            </th>
                            <th scope="col" class="ta-num">
                                <button type="button" class="ranking-table-sort" data-sort-key="points" data-sort-type="number">
                                    Pts / but
                                    <i class="ti ti-chevron-down ranking-table-sort__icon" aria-hidden="true"></i>
                                </button>
                            </th>
                            <th scope="col">Équipes</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for row in buteur_rows %}
                            <tr
                                data-sort-rank="{{ loop.index }}"
                                data-sort-team="{{ row.name|lower }}"
                                data-sort-cote="{{ row.coefficient }}"
                                data-sort-goals="{{ row.goals }}"
                                data-sort-points="{{ row.points_per_goal }}"
                            >
                                <td class="ta-num" data-ranking-rank>#{{ loop.index }}</td>
                    <td>
                        <div class="match-live-compact-team-cell">
                            {% include 'buteur/_photo_lightbox.html.twig' with {
                                photo: row.photo|default(null),
                                name: row.name,
                                initials: buteur_initials(row.name),
                                img_class: 'match-live-buteur-pick__photo',
                                width: 28,
                                height: 28,
                            } only %}
                            <span class="ranking-team-name">{{ row.name }}</span>
                        </div>
                    </td>
                                <td>{{ row.country|default('—') }}</td>
                                <td class="ta-num">
                                    <strong class="match-live-match-buteurs-cote">×{{ row.coefficient|number_format(2, ',', ' ') }}</strong>
                                </td>
                                <td class="ta-num">{{ row.goals }}</td>
                                <td class="ta-num">{{ row.points_per_goal }}</td>
                                <td class="buteurs-index-teams">
                                    {% if row.teams is not empty %}
                                        {{ row.teams|join(', ') }}
                                        <span class="ta-card-text">({{ row.selections_count }} joueur{{ row.selections_count > 1 ? 's' : '' }})</span>
                                    {% else %}
                                        —
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            <p class="ta-card-text mt-5">Aucun buteur n’a encore été choisi par les joueurs cotisés.</p>
        {% endif %}
    </section>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {% if has_buteurs %}
        <script src="{{ asset('js/ranking-table-sort.js') }}?v=1" defer></script>
    {% endif %}
{% endblock %}