{% extends 'base.twig' %}

{# --- METADATA & SCHEMA (Inchangé) --- #}
{% block title %}{{'page.title'|trans({})}}{% endblock %}
{% block meta_description %}{{'hero.subheading'|trans({})}}{% endblock %}

{% block canonical_url %}<link rel="canonical" href="{{ url('app_pages') }}" />{% endblock %}
{% block breadcrumb_schema %}
    <script type="application/ld+json">
        {
            "@context": "https://schema.org",
            "@type": "BreadcrumbList",
            "itemListElement": [
                {
                    "@type": "ListItem",
                    "position": 1,
                    "name": "{{ 'breadcrumb.home'|trans }}",
                    "item": "{{ app.request.schemeAndHttpHost }}"
                },
                {
                    "@type": "ListItem",
                    "position": 2,
                    "name": "{{ 'page.title'|trans({}) }}",
                    "item": "{{ app.request.schemeAndHttpHost }}{{ app.request.pathInfo }}"
                }
            ]
        }
    </script>
{% endblock %}

{# --- BODY AVEC TAILWIND CSS --- #}
{% block body %}
    {#
    NOTE: Le bloc de données cosplayers a été retiré.
    Cette variable 'cosplayers' doit être passée par votre contrôleur PHP.
    #}
    {% set cosplayers = cosplayers is defined ? cosplayers : [] %}

    <div class="container mx-auto px-4 py-16">

        {# --- En-tête de la Section Communauté --- #}
        <div class="text-center mb-12">
            {# Utilise le filtre trans avec le nombre d'éléments réel et la pluralisation #}
            <h2 class="text-4xl font-extrabold text-gray-900 sm:text-5xl tracking-tight">
                {{ 'creators.title_plural'|trans({'%count%': cosplayers|length}) }}
            </h2>
            <p class="mt-4 text-xl text-gray-500">
                {{ 'creators.intro_text'|trans({}) }}
            </p>
        </div>

        {# --- Listing des Cartes de Cosplayers --- #}
        {% if cosplayers|length > 0 %}
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

                {% for creator in cosplayers %}
                    <div class="bg-white rounded-xl shadow-2xl overflow-hidden transform hover:scale-[1.02] transition duration-300">

                        {# Image du Cosplayer #}
                        <img class="w-full h-80 object-cover"
                             src="{{ creator.image }}"
                             alt="Portrait de {{ creator.pseudo }}"
                             onerror="this.onerror=null;this.src='https://placehold.co/400x600/e5e7eb/4b5563?text=Image+Indisponible';"
                        >

                        <div class="p-6">

                            {# Pseudo #}
                            <h3 class="text-2xl font-bold text-gray-800 mb-2">{{ creator.pseudo }}</h3>

                            {# Description Courte #}
                            <p class="text-gray-600 mb-4 h-16 overflow-hidden">
                                {{ creator.description }}
                            </p>

                            {# Réseaux Sociaux #}
                            <div class="mb-6">
                                <p class="text-sm font-semibold text-indigo-600 mb-2">
                                    {{ 'creators.social_label'|trans({}) }}
                                </p>
                                <div class="flex space-x-3">
                                    {% for platform, url in creator.social %}
                                        <a href="{{ url }}" target="_blank" rel="noopener noreferrer"
                                           class="text-gray-500 hover:text-pink-600 transition duration-150"
                                           title="{{ 'creators.social_label'|trans({}) }} {{ creator.pseudo }} sur {{ platform|capitalize }}">
                                            {# Icône de Réseau Social (Générique) #}
                                            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                                <path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm0 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
                                            </svg>
                                        </a>
                                    {% endfor %}
                                </div>
                            </div>

                            {# Bouton Voir Plus #}
                            <a href="/cosplayer/{{ creator.pseudo|lower|replace({' ': '-'}) }}"
                               class="w-full inline-flex justify-center items-center px-4 py-3 border border-transparent text-sm font-medium rounded-lg shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-150">
                                {{ 'creators.button'|trans({}) }}
                            </a>
                        </div>
                    </div>
                {% endfor %}

            </div>
        {% else %}
            {# Message si la liste est vide (en attendant les données réelles) #}
            <p class="text-center text-xl text-gray-500 italic mt-8">
                {{ 'creators.empty_list'|trans({}) }}
            </p>
        {% endif %}
        {# Fin Listing #}

        {# --- BLOC CTA Cosplayer (Tout en trans) --- #}
        <div class="mt-20 bg-indigo-50 rounded-xl p-8 md:p-12 shadow-inner text-center">
            <h2 class="text-3xl font-extrabold text-indigo-900 sm:text-4xl">
                {{ 'cta_creator.heading'|trans }}
            </h2>
            <p class="mt-4 text-xl text-indigo-700">
                {{ 'cta_creator.subtext'|trans({}) }}
            </p>
            <div class="mt-8 flex justify-center">
                <a href="{{ path('app_pages_discover') }}"
                   class="inline-flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-lg text-white bg-pink-600 shadow-lg hover:bg-pink-700 transform hover:scale-[1.05] transition duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500">
                    {{ 'cta_creator.button'|trans({}) }}
                </a>
            </div>
        </div>

    </div>

{% endblock %}
