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

{% block title %}{{ country.nom }} — Effectif | LPF 2026{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('css/country-players.css') }}?v=7">
    <link rel="stylesheet" href="{{ asset('css/buteur-pick.css') }}?v=3">
{% endblock %}

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

{% block body %}
<div class="country-players-page">
    <section class="ta-card p-5 mb-4 country-players-header">
        <a href="{{ path('app_groups') }}" class="country-players-back">
            <i class="ti ti-arrow-left" aria-hidden="true"></i> Retour aux groupes
        </a>
        <div class="country-players-title">
            <span class="country-players-flag">
                {% include 'components/_country_flag_img.html.twig' with { country: country } only %}
            </span>
            <h1 class="ta-card-title mb-0">{{ country.nom }}</h1>
            {% if country.groupe %}
                <span class="country-players-group">Groupe {{ country.groupe }}</span>
            {% endif %}
        </div>
        <p class="ta-card-text mb-0">
            {{ squad.total }} joueur{{ squad.total > 1 ? 's' : '' }} dans la sélection.
            {% if buteur_pick.enabled and buteur_pick.current_name %}
                Votre buteur&nbsp;: <strong>{{ buteur_pick.current_name }}</strong>.
            {% endif %}
        </p>
    </section>

    {% include 'competition/_country_squad_layout.html.twig' with {
        country: country,
        squad: squad,
        buteur_pick: buteur_pick,
        buteur_pick_return: buteur_pick_return,
        competition_started: competition_started|default(false),
    } only %}
</div>
{% endblock %}