{% extends 'frontend/layout.html.twig' %}

{% block content %}
<div class="container single-template">
    <div class="page-header">
		<h1 class="page-title">
			L'agenda 2030
		</h1>
	</div>

	<div class="single-contnet pt-4">
		<p>En septembre 2015, les 193 États membres de l’ONU ont adopté le programme de développement durable à l’horizon 2030, intitulé «&nbsp;Agenda 2030&nbsp;». C’est un plan d’action pour l’humanité, la planète et la prospérité. Il porte une vision de transformation de notre monde en renforçant la paix, en éradiquant la pauvreté et en assurant sa transition vers un développement durable.</p>
        <p>L’Agenda 2030 a fusionné l’agenda du développement et celui des Sommets de la Terre. Il est universel, c’est-à-dire qu’il s’applique à tous les pays, du Nord comme du Sud. À cet égard, tous les pays sont «&nbsp;en voie de développement durable&nbsp;». Avec ses 17 Objectifs de développement durable et 169 cibles (ou sous-objectifs), il dessine une feuille de route détaillée et couvrant pratiquement toutes les questions de société.</p>
		<br>
		<br>
    </div>

	<div class="row gx-md-5 gy-3">
		{% for goal in goals %}
                        <div class="col-xl-2 col-lg-2" style="margin-bottom:40px;">
                            <div class="icon-box" data-aos="fade-up">
                                <!--div class="icon"><i class="las la-basketball-ball1" style="color: {#{ goal.color }#};">{#{ goal.code }#}</i></div-->
                                <!--h4 class="title"><a href="{#{ path('index_goal', { 'id': goal.id }) }#}">{#{ goal.name }#}</a></h4>
                                <p class="description">{#{ goal.description }#}</p-->
                                <a href="{{ path('odd', { 'id': goal.id }) }}"><img src="{{asset('dist/img/odd')}}{{ goal.code }}.png" style="width:100%"></a>
                            </div>
                        </div>
                        {% endfor %}
    </div>


    <div class="page-header">
		<h1 class="page-title">
			Indice global des ODD au Bénin
		</h1>
	</div>

    <div id="chart"></div>
</div>
{% endblock %}

{% block js %}
<script src="{{ asset('plugins/jquery/jquery.min.js') }}"></script>
<script src="{{asset('plugins/apexcharts/apexcharts.js')}}"></script>

<script>
$.getJSON('{{asset('plugins/apexcharts/locales/fr.json')}}', function(data) {
var fr = data

var options = {
  chart: {
    type: 'bar',
    locales: [fr],
    defaultLocale: 'fr',
  },
  series: [{
    name: 'Indice global',
    data: {{data | json_encode |raw}}
  }],
  xaxis: {
    categories: {{annees | json_encode |raw}}
  },
  yaxis: {
	  
	min : 0,
},
}

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();
});
</script>

{% endblock %}