{% extends 'base.twig' %}

{# --- METADATA & SCHEMA (Already using trans) --- #}
{% block title %}{{'adh_age.title'|trans}}{% endblock %}
{% block meta_description %}{{'adh_age.description'|trans}}{% endblock %}

{% block canonical_url %}<link rel="canonical" href="{{ url('app_adh',{id:main.id}) }}" />{% 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": "{{ 'adh_page.breadcrumb'|trans }}",
              "item": "{{ app.request.schemeAndHttpHost }}{{ app.request.pathInfo }}"
          }
        ]
      }
    </script>
{% endblock %}

{# --- BODY with Tailwind Styling and full i18n --- #}
{% block body %}
    <div class="max-w-4xl mx-auto p-4 sm:p-6 lg:p-8">

        <!-- Titre principal de la page -->
        <h1 class="text-3xl font-extrabold text-gray-900 mb-8 text-center">
            {{ 'adh_age.title'|trans }}
        </h1>

        <!-- Carte d'information de l'AG -->
        <div class="bg-white shadow-xl rounded-2xl p-6 md:p-10 border border-gray-100">
            <h2 class="text-2xl font-bold text-indigo-700 mb-6 border-b pb-2">
                {{ 'ag.info.title'|trans }}
            </h2>

            <div class="space-y-4">

                <!-- Ligne 1: Date & Heure -->
                <div class="flex flex-col sm:flex-row sm:items-center">
                    <span class="font-semibold text-gray-600 w-full sm:w-1/4">
                        {{ 'ag.info.date_time'|trans }} :
                    </span>
                    <span class="text-lg font-medium text-gray-900 mt-1 sm:mt-0 sm:w-3/4">
                        {{ main.agDateAt | date('d/m/Y') }} {{ 'global.at'|trans }} {{ main.agDateAt | date('H:i') }}
                    </span>
                </div>

                <!-- Ligne 2: Lieu -->
                <div class="flex flex-col sm:flex-row sm:items-center">
                    <span class="font-semibold text-gray-600 w-full sm:w-1/4">
                        {{ 'ag.info.location'|trans }} :
                    </span>
                    <span class="text-gray-800 mt-1 sm:mt-0 sm:w-3/4">
                        {{ main.locate }} {{ main.locateZipcode }} {{ main.locateCity }}
                    </span>
                </div>

                <!-- Ligne 3: Nature de l'AG -->
                <div class="flex flex-col sm:flex-row sm:items-center">
                    <span class="font-semibold text-gray-600 w-full sm:w-1/4">
                        {{ 'ag.info.type'|trans }} :
                    </span>
                    <span class="text-gray-800 mt-1 sm:mt-0 sm:w-3/4">
                        {{ main.type }}
                    </span>
                </div>
            </div>
        </div>

        <!-- Espace pour le contenu spécifique aux adhérents : Liste des Signatures -->
        <div class="mt-12">
            <h2 class="text-xl font-semibold text-gray-900 border-b pb-2 mb-4">
                {{ 'ag.content.signatures_list'|trans({'%count%': signed|length}) }}
            </h2>

            <div class="overflow-x-auto shadow-md rounded-lg">
                <table class="min-w-full divide-y divide-gray-200">
                    <!-- En-tête du tableau -->
                    <thead class="bg-indigo-50">
                    <tr>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-1/4">
                            {{ 'member.civility'|trans }}
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-1/2">
                            {{ 'member.name_surname'|trans }}
                        </th>
                        <th scope="col" class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider w-1/4">
                            {{ 'member.signature'|trans }}
                        </th>
                    </tr>
                    </thead>

                    <!-- Corps du tableau -->
                    <tbody class="bg-white divide-y divide-gray-200">
                    {% for sign in signed %}
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                {{ sign.members.civ }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                {{ sign.members.name }} {{ sign.members.surname }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-center text-sm font-medium">
                                <a href="{{ sign.sign }}" target="_blank" class="text-indigo-600 hover:text-indigo-900 font-bold hover:underline transition duration-150">
                                    {{ 'global.signed_link'|trans }}
                                </a>
                            </td>
                        </tr>
                    {% else %}
                        <tr>
                            <td colspan="3" class="px-6 py-4 text-center text-sm text-gray-500 italic">
                                {{ 'ag.content.no_signatures_yet'|trans }}
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

    </div>
{% endblock %}