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

{% block title %}{{ team.name }} | Equipe | LPF 2026{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('css/lpf-image-lightbox.css') }}?v=1">
    <link rel="stylesheet" href="{{ asset('css/team-show.css') }}?v=11">
    <link rel="stylesheet" href="{{ asset('css/team-interview.css') }}?v=1">
    {% if not team_interview.is_published|default(false) %}
        <link rel="stylesheet" href="{{ asset('css/match-hub-v2.css') }}?v=16">
    {% endif %}
    {% if app.user and badges_active_for(app.user) and team_badges|default([])|length > 0 %}
        <link rel="stylesheet" href="{{ asset('css/badges.css') }}?v=14">
    {% endif %}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('js/lpf-image-lightbox.js') }}?v=1" defer></script>
    {% if team_ranking_snapshot and team_members is not empty %}
        <script src="{{ asset('js/team-show-player-breakdown.js') }}?v=6" defer data-turbo-track="reload"></script>
    {% endif %}
    {% if played_rows is not empty %}
        <script src="{{ asset('js/team-show-match-breakdown.js') }}?v=1" defer data-turbo-track="reload"></script>
    {% endif %}
{% endblock %}

{% block body %}
    <section class="ta-topbar">
        <div>
            <p class="ta-page-subtitle team-show-back">
                <a href="{{ path('app_ranking') }}" class="ta-link">← Retour au classement</a>
            </p>
            <h1 class="ta-page-title">{{ team.name }}</h1>
        </div>
    </section>

    <section class="ta-card team-show-hero">
        {% set team_logo_src = team.logo
            ? (team.logo starts with 'http' ? team.logo : asset(team.logo))
            : null %}
        {% if team.slogan %}
            <p class="team-show-slogan team-show-hero__slogan">« {{ team.slogan }} »</p>
        {% else %}
            <p class="team-show-hero__no-slogan ta-card-text">Pas de slogan renseigné.</p>
        {% endif %}

        <div class="team-show-hero__layout">
            <div class="team-show-hero__logo">
                {% include 'shared/_lpf_lightbox_trigger.html.twig' with {
                    src: team_logo_src,
                    title: 'Logo — ' ~ team.name,
                    alt: 'Logo de l’équipe ' ~ team.name,
                    img_class: 'team-show-team-logo',
                    btn_class: 'lpf-lightbox-trigger team-show-team-logo-btn',
                    placeholder: team.name|first|upper,
                    placeholder_class: 'team-show-team-logo-placeholder ranking-team-logo-placeholder',
                } %}
            </div>

            <div class="team-show-hero__players">
            {% if team_members is empty %}
                <p class="ta-card-text team-show-hero__no-players">Aucun joueur dans cette équipe.</p>
            {% else %}
                {% for member in team_members %}
                    {% set player_avatar_src = null %}
                    {% if member.player and member.player.avatar %}
                        {% set av = member.player.avatar %}
                        {% set player_avatar_src = av starts with 'http' ? av : asset(av) %}
                    {% endif %}
                    <div class="team-show-hero__player">
                        <div class="team-show-hero__player-avatar">
                            {% include 'shared/_lpf_lightbox_trigger.html.twig' with {
                                src: player_avatar_src,
                                title: member.nickname,
                                alt: 'Avatar de ' ~ member.nickname,
                                img_class: 'team-show-player-avatar',
                                btn_class: 'lpf-lightbox-trigger team-show-player-avatar-btn',
                                placeholder: member.nickname|first|upper,
                                placeholder_class: 'team-show-player-avatar-placeholder ranking-team-logo-placeholder',
                            } %}
                        </div>
                        <p class="team-show-hero__player-nick">{{ member.nickname }}</p>
                    </div>
                {% endfor %}
            {% endif %}
            </div>
        </div>
    </section>

    {% include 'competition/_team_show_interview.html.twig' %}

    {% include 'competition/_team_show_buteurs.html.twig' with {
        team_buteur_picks: team_buteur_picks|default([]),
    } only %}

    {% if app.user and badges_active_for(app.user) and team_badges|default([])|length > 0 %}
        {% include 'account/_badges_section.html.twig' with {
            player_badges: [],
            team_badges: team_badges,
        } only %}
    {% endif %}

    <div class="team-show-stats-grid mt-5" data-turbo-cache="false">
        <section class="ta-card team-show-ranking-card">
            <div class="team-show-ranking-card__head">
                <h2 class="ta-card-title team-show-ranking-card__title">Classement actuel</h2>
                {% if team_ranking_snapshot and team_members is not empty %}
                    <button
                        type="button"
                        id="team-show-player-breakdown-btn"
                        class="btn btn-sm team-show-player-breakdown-btn"
                        data-endpoint="{{ path('app_team_player_breakdown', { id: team.id }) }}"
                    >
                        Voir les résultats par joueur
                    </button>
                {% endif %}
            </div>
            <p id="team-show-player-breakdown-denied" class="team-show-player-breakdown-message" hidden role="alert"></p>
            {% if team_ranking_snapshot and team_members is not empty %}
                <dialog id="team-show-player-breakdown-dialog" class="team-show-player-breakdown-dialog" aria-labelledby="team-show-player-breakdown-dialog-title">
                    <form method="dialog" class="team-show-player-breakdown-dialog__form">
                    <h3 id="team-show-player-breakdown-dialog-title" class="team-show-player-breakdown-dialog__title">Résultats par joueur</h3>
                    <p class="team-show-player-breakdown-dialog__text">
                        Es-tu vraiment sûr de vouloir faire ça&nbsp;? La vérité peut parfois être dure à avaler…
                    </p>
                    <div class="team-show-player-breakdown-dialog__actions">
                        <button type="submit" class="btn btn-outline btn-sm" value="cancel">Annuler</button>
                        <button type="submit" class="btn btn-primary btn-sm" value="confirm">Oui, montre-moi</button>
                    </div>
                </form>
            </dialog>
            {% endif %}
            {% if team_ranking_snapshot %}
                {% if latest_ranking_match %}
                    <p class="ta-card-text team-show-ranking-meta">
                        Classement général après
                        {{ latest_ranking_match.paysDomicile ? latest_ranking_match.paysDomicile.nom : '?' }}
                        —
                        {{ latest_ranking_match.paysExterieur ? latest_ranking_match.paysExterieur.nom : '?' }}
                        {% if latest_ranking_match.dateHeure %}
                            ({{ latest_ranking_match.dateHeure|fr_match_date }}).
                        {% endif %}
                    </p>
                {% endif %}
                <div class="ta-table-wrap team-show-ranking-table-wrap">
                    <table id="team-show-ranking-table" class="ta-table team-show-ranking-table team-show-ranking-table--players">
                        <thead>
                            <tr>
                                <th scope="col" class="team-show-ranking-table__label-col"></th>
                                <th scope="col" class="team-show-ranking-table__team-col">Équipe</th>
                                {% for member in team_members %}
                                    <th scope="col" class="ta-num team-show-ranking-table__player-col team-show-ranking-table__player-col--locked">
                                        {{ member.nickname }}
                                    </th>
                                {% endfor %}
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th scope="row">Rang</th>
                                <td class="ta-num team-show-ranking-table__rank">
                                    <strong>#{{ team_ranking_snapshot.position }}</strong>
                                    <span class="team-show-ranking-slash">/</span>
                                    {{ latest_ranking_teams_count }} équipes
                                </td>
                                {% for member in team_members %}
                                    <td class="ta-num team-show-ranking-table__player-col team-show-ranking-table__player-col--locked" aria-hidden="true">—</td>
                                {% endfor %}
                            </tr>
                            <tr>
                                <th scope="row">Points</th>
                                <td class="ta-num">{{ team_ranking_snapshot.totalPoints|number_format(0, ',', ' ') }}</td>
                                {% for member in team_members %}
                                    <td
                                        class="ta-num team-show-ranking-table__player-col team-show-ranking-table__player-col--locked"
                                        data-player-id="{{ member.player ? member.player.id : '' }}"
                                        data-player-field="points_total"
                                    ><span class="team-show-ranking-table__locked-placeholder" aria-hidden="true">—</span></td>
                                {% endfor %}
                            </tr>
                            <tr>
                                <th scope="row">Scores exacts</th>
                                <td class="ta-num">{{ team_points_summary.points_score_exact|number_format(0, ',', ' ') }} ({{ team_points_summary.scores_exacts_count }})</td>
                                {% for member in team_members %}
                                    <td
                                        class="ta-num team-show-ranking-table__player-col team-show-ranking-table__player-col--locked"
                                        data-player-id="{{ member.player ? member.player.id : '' }}"
                                        data-player-field="points_score_exact"
                                    ><span class="team-show-ranking-table__locked-placeholder" aria-hidden="true">—</span></td>
                                {% endfor %}
                            </tr>
                            <tr>
                                <th scope="row">Bons résultats</th>
                                <td class="ta-num">{{ team_points_summary.points_bon_resultat|number_format(0, ',', ' ') }} ({{ team_points_summary.bons_resultats_count }})</td>
                                {% for member in team_members %}
                                    <td
                                        class="ta-num team-show-ranking-table__player-col team-show-ranking-table__player-col--locked"
                                        data-player-id="{{ member.player ? member.player.id : '' }}"
                                        data-player-field="points_bon_resultat"
                                    ><span class="team-show-ranking-table__locked-placeholder" aria-hidden="true">—</span></td>
                                {% endfor %}
                            </tr>
                            <tr>
                                <th scope="row">Résultats faux</th>
                                <td class="ta-num">{{ team_points_summary.points_resultats_faux|number_format(0, ',', ' ') }} ({{ team_points_summary.resultats_faux_count }})</td>
                                {% for member in team_members %}
                                    <td
                                        class="ta-num team-show-ranking-table__player-col team-show-ranking-table__player-col--locked"
                                        data-player-id="{{ member.player ? member.player.id : '' }}"
                                        data-player-field="resultats_faux"
                                    ><span class="team-show-ranking-table__locked-placeholder" aria-hidden="true">—</span></td>
                                {% endfor %}
                            </tr>
                            <tr class="{{ buteur_points_eliminated|default(false) ? 'team-show-points-row--eliminated' : '' }}">
                                <th scope="row">
                                    Buteur
                                    {% if buteur_points_eliminated|default(false) %}
                                        <span class="team-show-points-row__eliminated-badge" title="Les deux buteurs de l’équipe sont éliminés de la compétition.">Éliminés</span>
                                    {% endif %}
                                </th>
                                <td class="ta-num">{{ team_points_summary.points_buteur|number_format(0, ',', ' ') }} ({{ team_points_summary.buteur_goals_count }})</td>
                                {% for member in team_members %}
                                    <td
                                        class="ta-num team-show-ranking-table__player-col team-show-ranking-table__player-col--locked"
                                        data-player-id="{{ member.player ? member.player.id : '' }}"
                                        data-player-field="points_buteur"
                                    ><span class="team-show-ranking-table__locked-placeholder" aria-hidden="true">—</span></td>
                                {% endfor %}
                            </tr>
                            <tr>
                                <th scope="row" title="{{ bigballs_term('column_ratio_title') }}">{{ bigballs_term('name') }}</th>
                                <td class="ta-num">{{ team_points_summary.points_bigballs|number_format(0, ',', ' ') }} ({{ team_points_summary.bigballs_succeeded }}/{{ team_points_summary.bigballs_attempted }})</td>
                                {% for member in team_members %}
                                    <td class="ta-num team-show-ranking-table__player-col team-show-ranking-table__player-col--locked" aria-hidden="true">—</td>
                                {% endfor %}
                            </tr>
                        </tbody>
                    </table>
                </div>
                <p class="mt-3">
                    <a href="{{ path('app_ranking') }}" class="ta-link">Voir le classement complet</a>
                </p>
            {% elseif latest_ranking_teams_count == 0 %}
                <p class="ta-card-text">Aucun classement n'a encore été calculé.</p>
            {% else %}
                <p class="ta-card-text">
                    Cette équipe ne figure pas au dernier classement enregistré
                    ({{ latest_ranking_teams_count }} équipes classées).
                </p>
                <p class="mt-2">
                    <a href="{{ path('app_ranking') }}" class="ta-link">Voir le classement</a>
                </p>
            {% endif %}
        </section>

        {% if ranking_evolution_by_day is not empty %}
            <section class="ta-card team-show-evolution-card" aria-labelledby="team-evolution-heading">
                <h2 id="team-evolution-heading" class="ta-card-title">Évolution du classement</h2>
                <p class="ta-card-text">
                    Rang après le <strong>dernier match classé</strong> de chaque journée calendaire.
                </p>

                {% include 'competition/_team_show_ranking_chart.html.twig' with {
                    ranking_evolution_chart: ranking_evolution_chart,
                } only %}
            </section>
        {% endif %}
    </div>

    {% if not team_interview.is_published|default(false) %}
    <section class="ta-card mt-5 team-show-matches-card">
        <h2 class="ta-card-title">Matchs joués</h2>
        <p class="ta-card-text">Dépliez un match pour voir le détail des points équipe (mode facture).</p>

        {% if played_rows is empty %}
            <p class="ta-card-text mt-3">Aucun match joué avec pronostic noté pour les membres de cette équipe.</p>
        {% else %}
            <div class="team-show-matches-list">
                {% for row in played_rows %}
                    {% set m = row.match %}
                    <details class="team-show-match-item"
                        data-team-show-match-breakdown
                        data-breakdown-url="{{ path('app_team_show_match_breakdown', { teamId: team.id, matchId: m.id }) }}">
                        <summary class="team-show-match-item__summary">
                            <span class="team-show-match-item__date">
                                {{ m.dateHeure ? m.dateHeure|fr_match_date : '—' }}{% set phase_label = match_phase_label(m) %}{% if phase_label %} · {{ phase_label }}{% endif %}
                            </span>
                            <span class="team-show-match-item__fixture">
                                {{ m.paysDomicile ? country_short_label(m.paysDomicile) : '?' }}
                                <span class="team-show-match-item__score">{{ m.scoreDomicile }} - {{ m.scoreExterieur }}</span>
                                {{ m.paysExterieur ? country_short_label(m.paysExterieur) : '?' }}
                            </span>
                            {% if row.team_match_points is not null %}
                                <span class="team-show-match-item__pts">
                                    {{ row.team_match_points > 0 ? '+' : '' }}{{ row.team_match_points }} pts
                                </span>
                            {% endif %}
                            <span class="team-show-match-item__chevron" aria-hidden="true">
                                <i class="ti ti-chevron-down"></i>
                            </span>
                        </summary>
                        <div class="team-show-match-item__body">
                            <div class="team-show-match-item__pronos">
                                {% for member in team_members %}
                                    {% set prono = row.pronostics[loop.index0] ?? null %}
                                    <div class="team-show-match-item__prono-row">
                                        <span class="team-show-match-item__prono-name">{{ member.nickname }}</span>
                                        {% if prono %}
                                            <span class="team-show-match-item__prono-values">
                                                {{ prono.scoreDomicile }} - {{ prono.scoreExterieur }}
                                                {% if prono.points is not null %}
                                                    · {{ prono.points|number_format(0, ',', ' ') }} pts
                                                {% endif %}
                                            </span>
                                        {% else %}
                                            <span class="team-show-match-item__prono-values">—</span>
                                        {% endif %}
                                    </div>
                                {% endfor %}
                            </div>
                            <div class="team-show-match-item__breakdown" data-team-show-match-breakdown-target hidden>
                                <p class="team-show-match-item__breakdown-loading ta-card-text" data-team-show-match-breakdown-loading>
                                    Chargement du détail des points…
                                </p>
                            </div>
                            <p class="team-show-match-item__hub-link">
                                <a href="{{ path('app_match_hub', { id: m.id }) }}" class="ta-link">Ouvrir la fiche match</a>
                            </p>
                        </div>
                    </details>
                {% endfor %}
            </div>
        {% endif %}
    </section>
    {% endif %}

    {% include 'shared/_lpf_image_lightbox.html.twig' %}
{% endblock %}