{% extends 'base.twig' %}

{% block title %}{{'doc_page.title'|trans}}{% endblock %}
{% block meta_description %}{{'doc_page.description'|trans}}{% endblock %}

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

{% block body %}
    <div class="bg-[#fbfbfb] font-sans text-gray-900 overflow-x-hidden">

        {# --- HEADER --- #}
        <header class="relative pt-16 pb-20 px-4 border-b-4 border-gray-900 bg-white">
            <div class="max-w-7xl mx-auto relative z-10">
                <h1 class="text-6xl md:text-8xl font-black italic uppercase tracking-tighter leading-none">
                    {{ 'doc_list.title'|trans }}
                </h1>
                <div class="h-3 w-48 bg-indigo-600 skew-x-[-20deg] mt-6 shadow-[4px_4px_0px_#eab308]"></div>
            </div>
            <div class="absolute top-0 right-0 opacity-[0.03] pointer-events-none select-none hidden lg:block">
                <span class="text-[20rem] font-black italic uppercase leading-none">DOCS</span>
            </div>
        </header>

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

            {# --- SECTION 1 : AG ORDINAIRE (Style Indigo/Cyber) --- #}
            <section class="mb-20">
                <div class="inline-block bg-indigo-600 text-white px-8 py-3 font-black italic skew-x-[-15deg] mb-12 shadow-xl border-b-4 border-gray-900">
                <span class="skew-x-[15deg] block uppercase tracking-widest text-xl">
                    [01] {{ 'doc_list.ag_ordinaire_title'|trans }}
                </span>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    {% for ag in ag_ordinaire %}
                        <div class="group relative bg-white border-4 border-gray-900 p-8 shadow-[10px_10px_0px_#4f46e5] hover:shadow-[14px_14px_0px_#4f46e5] hover:-translate-y-1 transition-all italic">

                            {# Badge Date #}
                            <div class="flex justify-between items-start mb-6">
                                <div>
                                    <p class="text-[10px] font-black uppercase text-gray-400 tracking-[0.2em] mb-1">{{ 'doc_ag_at'|trans }}</p>
                                    <h3 class="text-3xl font-black uppercase tracking-tighter">{{ ag.agDateAt|date('d/m/Y') }}</h3>
                                </div>
                            </div>

                            {# Infos Membres #}
                            <div class="bg-gray-50 border-l-8 border-indigo-600 p-4 mb-6">
                                <div class="grid grid-cols-2 gap-4 text-[11px] font-bold uppercase tracking-tight">
                                    <div>
                                        <span class="block text-gray-400 mb-1">{{ 'ag.president_label'|trans }}</span>
                                        <span class="text-gray-900">{{ ag.president.civ }} {{ ag.president.name }} {{ ag.president.surname }}</span>
                                    </div>
                                    <div>
                                        <span class="block text-gray-400 mb-1">{{ 'ag.secretary_label'|trans }}</span>
                                        <span class="text-gray-900">{{ ag.secretaire.civ }} {{ ag.secretaire.name }} {{ ag.secretaire.surname }}</span>
                                    </div>
                                </div>
                            </div>

                            {# Download Link #}
                            <a download="ag_normal_ecosplay_{{ ag.agDateAt|date('d-m-Y') }}.pdf"
                               href="{{ vich_uploader_asset(ag,'ag') }}"
                               class="flex items-center justify-between w-full bg-white border-4 border-gray-900 px-6 py-4 font-black uppercase italic group-hover:bg-indigo-600 group-hover:text-white transition-colors">
                                <span>{{ 'ag.view_document_link'|trans }}</span>
                                <i class="fas fa-file-download text-xl"></i>
                            </a>
                        </div>
                    {% endfor %}
                </div>
            </section>

            {# --- SECTION 2 : AG EXTRAORDINAIRE (Style Red/Alert) --- #}
            <section>
                <div class="inline-block bg-red-600 text-white px-8 py-3 font-black italic skew-x-[-15deg] mb-12 shadow-xl border-b-4 border-gray-900">
                <span class="skew-x-[15deg] block uppercase tracking-widest text-xl">
                    [02] {{ 'doc_list.ag_extraordinaire_title'|trans }}
                </span>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    {% for ag in ag_extraordinaire %}
                        <div class="group relative bg-white border-4 border-gray-900 p-8 shadow-[10px_10px_0px_#ef4444] hover:shadow-[14px_14px_0px_#ef4444] hover:-translate-y-1 transition-all italic">

                            <div class="flex justify-between items-start mb-6">
                                <div>
                                    <p class="text-[10px] font-black uppercase text-red-400 tracking-[0.2em] mb-1">{{ 'doc_ag_at'|trans }}</p>
                                    <h3 class="text-3xl font-black uppercase tracking-tighter text-red-600">{{ ag.agDateAt|date('d/m/Y') }}</h3>
                                </div>
                            </div>

                            <div class="bg-red-50 border-l-8 border-red-600 p-4 mb-6">
                                <div class="grid grid-cols-2 gap-4 text-[11px] font-bold uppercase tracking-tight">
                                    <div>
                                        <span class="block text-red-400 mb-1">{{ 'ag.president_label'|trans }}</span>
                                        <span class="text-gray-900">{{ ag.president.civ }} {{ ag.president.name }} {{ ag.president.surname }}</span>
                                    </div>
                                    <div>
                                        <span class="block text-red-400 mb-1">{{ 'ag.secretary_label'|trans }}</span>
                                        <span class="text-gray-900">{{ ag.secretaire.civ }} {{ ag.secretaire.name }} {{ ag.president.surname }}</span>
                                    </div>
                                </div>
                            </div>

                            <a download="ag_extra_ecosplay_{{ ag.agDateAt|date('d-m-Y') }}.pdf"
                               href="{{ vich_uploader_asset(ag,'ag') }}"
                               class="flex items-center justify-between w-full bg-white border-4 border-red-600 px-6 py-4 font-black uppercase italic group-hover:bg-red-600 group-hover:text-white transition-colors">
                                <span>{{ 'ag.view_document_link'|trans }}</span>
                                <i class="fas fa-exclamation-triangle text-xl"></i>
                            </a>
                        </div>
                    {% endfor %}
                </div>
            </section>
        </div>

        {# --- DECORATIVE FOOTER (MARQUEE) --- #}
        <div class="mt-24 bg-gray-900 py-4 overflow-hidden border-t-4 border-indigo-600">
            <div class="flex whitespace-nowrap animate-marquee italic">
                {% for i in 1..20 %}
                    <span class="text-white font-black uppercase mx-8 text-xs opacity-40">
                    {{ 'doc_roll'|trans }}
                </span>
                {% endfor %}
            </div>
        </div>

    </div>

    <style>
        @keyframes marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        .animate-marquee {
            display: flex;
            width: 200%;
            animation: marquee 40s linear infinite;
        }
    </style>
{% endblock %}