{% extends 'adminstram/layout.html.twig' %}
{% block body %}
<div class="card-body">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h4 class="mt-0 header-title">Gestion de la page Sustainability</h4>
        <button type="submit" form="sustainability_form" class="btn btn-success">Enregistrer les modifications</button>
    </div>

    {{ form_start(form, {'attr': {'id': 'sustainability_form'}}) }}
    
    <!-- Section Header -->
    <div class="row">
        <div class="col-md-6">
            <h5 class="mt-3 text-primary">Header (FR)</h5>
            {{ form_row(form.headerTitle) }}
            {{ form_row(form.headerDescription) }}
        </div>
        <div class="col-md-6">
            <h5 class="mt-3 text-primary">Header (EN)</h5>
            {{ form_row(form.headerTitle_en) }}
            {{ form_row(form.headerDescription_en) }}
        </div>
    </div>
    
    <hr>

    <!-- Section Impact Local (New) -->
    <div class="row bg-light p-3 rounded mb-4" style="border: 1px solid #eee;">
        <div class="col-md-12">
            <h5 class="mt-0 text-success"><i class="fa fa-globe"></i> Section Impact Local & Afrique</h5>
        </div>
        <div class="col-md-6">
            {{ form_row(form.localImpactImage) }}
            <p class="text-muted"><small>Image actuelle : {{ sustainability.localImpactImage }}</small></p>
            <strong>FR</strong>
            {{ form_row(form.localImpactTitle) }}
            {{ form_row(form.localImpactText) }}
        </div>
        <div class="col-md-6">
            <br><br><br> <!-- align with left side upload -->
            <strong>EN</strong>
            {{ form_row(form.localImpactTitle_en) }}
            {{ form_row(form.localImpactText_en) }}
        </div>
    </div>

    <!-- Section Objectifs de Développement Durable (ODD) -->
    <div class="row bg-light p-3 rounded mb-4" style="border: 1px solid #eee;">
        <div class="col-md-12">
            <h5 class="mt-0 text-warning"><i class="fa fa-star"></i> Les 7 Objectifs de Développement Durable (ODD)</h5>
            {{ form_row(form.videoUrl) }}
        </div>
        
        <!-- ODD 6 -->
        <div class="col-md-12"><h6 class="text-info border-bottom pb-1">ODD 6 : Eau propre et assainissement</h6></div>
        <div class="col-md-6">{{ form_row(form.odd6Title) }}{{ form_row(form.odd6Text) }}</div>
        <div class="col-md-6">{{ form_row(form.odd6TitleEn) }}{{ form_row(form.odd6TextEn) }}</div>

        <!-- ODD 7 -->
        <div class="col-md-12"><h6 class="text-info border-bottom pb-1">ODD 7 : Énergie propre et d'un coût abordable</h6></div>
        <div class="col-md-6">{{ form_row(form.odd7Title) }}{{ form_row(form.odd7Text) }}</div>
        <div class="col-md-6">{{ form_row(form.odd7TitleEn) }}{{ form_row(form.odd7TextEn) }}</div>

        <!-- ODD 8 -->
        <div class="col-md-12"><h6 class="text-info border-bottom pb-1">ODD 8 : Travail décent et croissance économique</h6></div>
        <div class="col-md-6">{{ form_row(form.odd8Title) }}{{ form_row(form.odd8Text) }}</div>
        <div class="col-md-6">{{ form_row(form.odd8TitleEn) }}{{ form_row(form.odd8TextEn) }}</div>

        <!-- ODD 9 -->
        <div class="col-md-12"><h6 class="text-info border-bottom pb-1">ODD 9 : Industrie, innovation et infrastructure</h6></div>
        <div class="col-md-6">{{ form_row(form.odd9Title) }}{{ form_row(form.odd9Text) }}</div>
        <div class="col-md-6">{{ form_row(form.odd9TitleEn) }}{{ form_row(form.odd9TextEn) }}</div>

        <!-- ODD 11 -->
        <div class="col-md-12"><h6 class="text-info border-bottom pb-1">ODD 11 : Villes et communautés durables</h6></div>
        <div class="col-md-6">{{ form_row(form.odd11Title) }}{{ form_row(form.odd11Text) }}</div>
        <div class="col-md-6">{{ form_row(form.odd11TitleEn) }}{{ form_row(form.odd11TextEn) }}</div>

        <!-- ODD 12 -->
        <div class="col-md-12"><h6 class="text-info border-bottom pb-1">ODD 12 : Consommation et production responsables</h6></div>
        <div class="col-md-6">{{ form_row(form.odd12Title) }}{{ form_row(form.odd12Text) }}</div>
        <div class="col-md-6">{{ form_row(form.odd12TitleEn) }}{{ form_row(form.odd12TextEn) }}</div>

        <!-- ODD 13 -->
        <div class="col-md-12"><h6 class="text-info border-bottom pb-1">ODD 13 : Mesures relatives à la lutte contre les changements climatiques</h6></div>
        <div class="col-md-6">{{ form_row(form.odd13Title) }}{{ form_row(form.odd13Text) }}</div>
        <div class="col-md-6">{{ form_row(form.odd13TitleEn) }}{{ form_row(form.odd13TextEn) }}</div>
    </div>

    <!-- Section Gouvernance & Éthique (New) -->
    <div class="row bg-light p-3 rounded mb-4" style="border: 1px solid #eee;">
        <div class="col-md-12">
            <h5 class="mt-0 text-info"><i class="fa fa-balance-scale"></i> Gouvernance & Éthique</h5>
        </div>
        <div class="col-md-6">
            <strong>FR</strong>
            {{ form_row(form.govTitle) }}
            {{ form_row(form.govDescription) }}
        </div>
        <div class="col-md-6">
            <strong>EN</strong>
            {{ form_row(form.govTitle_en) }}
            {{ form_row(form.govDescription_en) }}
        </div>
    </div>

    <hr>

    <!-- Section Piliers ESG -->
    <div class="row">
        <div class="col-md-4">
            <h5 class="mt-3 text-warning">Écologie (E)</h5>
            {{ form_row(form.ecologyImage) }}
            <p class="text-muted"><small>Image actuelle : {{ sustainability.ecologyImage }}</small></p>
            <strong>FR</strong>
            {{ form_row(form.ecologyTitle) }}
            {{ form_row(form.ecologyText) }}
            <strong>EN</strong>
            {{ form_row(form.ecologyTitle_en) }}
            {{ form_row(form.ecologyText_en) }}
        </div>
        <div class="col-md-4">
            <h5 class="mt-3 text-danger">Social (S)</h5>
            {{ form_row(form.socialImage) }}
            <p class="text-muted"><small>Image actuelle : {{ sustainability.socialImage }}</small></p>
            <strong>FR</strong>
            {{ form_row(form.socialTitle) }}
            {{ form_row(form.socialText) }}
            <strong>EN</strong>
            {{ form_row(form.socialTitle_en) }}
            {{ form_row(form.socialText_en) }}
        </div>
        <div class="col-md-4">
            <h5 class="mt-3 text-info">Gouvernance (G)</h5>
            {{ form_row(form.governanceImage) }}
            <p class="text-muted"><small>Image actuelle : {{ sustainability.governanceImage }}</small></p>
            <strong>FR</strong>
            {{ form_row(form.governanceTitle) }}
            {{ form_row(form.governanceText) }}
            <strong>EN</strong>
            {{ form_row(form.governanceTitle_en) }}
            {{ form_row(form.governanceText_en) }}
        </div>
    </div>

    <div class="mt-5 mb-4 text-center">
        <button type="submit" class="btn btn-primary btn-lg px-5">Enregistrer tout le contenu</button>
    </div>
    {{ form_end(form) }}
</div>
{% endblock %}