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

{% block content %}
<div class="container single-template">
	<div class="page-header">
		<a href="{{ path('odd', { 'id': goal.id }) }}"><h1 class="page-title">
			{{agenda=='2030' ? 'ODD' : 'Aspiration' }} {{ goal.code }} : {{goal.name}}
		</h1></a>
	</div>

	<div class="row gx-md-5 gy-3">
		<div class="{{agenda=='2030' ? 'col-lg-8' : 'col-lg-12'}}">

			<div class="download-template" style="margin-top:0px;">

				<div class="licenses">
					<div class="title">
						<h2>{{agenda=='2030' ? 'Cible' : 'Objectifs' }}  {{ target.code }} : {{target.name}}</h2>
					</div>
				</div>
			</div>


			<div class="single-contnet pt-4">
				{{target.description}}
				<br>
				<br>
				<br>
				<div class="template-details">
					<h2>Les {{agenda=='2030' ? 'indicateurs' : 'domaines' }}  de {{agenda=='2030' ? 'la cible ' : "l'objectif " }}  {{target.code}}
					</h2>
				</div>

				<ul style="list-style-type: none;">
					{% for indicateur in target.indicators %}
						<li style="margin-bottom: 10px;">

							<a href="">
								<svg class="icon icon-chevron-right" fill="currentColor">
									<use xlink:href="{{asset('frontend/icons/icons-3.7.svg')}}#chevron-right"></use>
								</svg>
								{{ indicateur.code }}
								-
								{{ indicateur.name }}
							</a>
						</li>
					{% endfor %}
				</ul>
			</div>

			<div class="single-contnet pt-4">
				{{target.description}}
				<br>
				<br>
				<br>
				<div class="template-details">
					<h2>Les cibles de l'objectif  {{target.code}}
					</h2>
				</div>
				<section id="faq" class="faq">
      			<div class="container aos-init aos-animate" data-aos="fade-up">
				<ul style="list-style-type: none;">
					{% for indicateur in target.indicators %}
						<li style="margin-bottom: 10px;">

							<a href="">
								<svg class="icon icon-chevron-right" fill="currentColor">
									<use xlink:href="{{asset('frontend/icons/icons-3.7.svg')}}#chevron-right"></use>
								</svg>
								Domaine : {{ indicateur.code }}
								-
								{{ indicateur.name }}
							</a>

									<ul style="list-style-type: none;">
										{% for cible in indicateur.cibles %}
											<li style="margin-bottom: 0px;">

												<a href="">
													<svg class="icon icon-chevron-right" fill="currentColor">
														<use xlink:href="{{asset('frontend/icons/icons-3.7.svg')}}#chevron-right"></use>
													</svg>
													{{ cible.code }}
													-
													{{ cible.name }}
												</a>
											</li>
										{% endfor %}
									</ul>
						</li>
					{% endfor %}
				</ul>
			</div>

			<div class="single-contnet pt-4">
				{{target.description}}
				<br>
				<br>
				<br>
				<div class="template-details">
					<h2>Les indicateurs de l'objectif  {{target.code}}
					</h2>
				</div>



	<section id="faq" class="faq">
      <div class="container aos-init aos-animate" data-aos="fade-up">

        <ul class="faq-list accordion aos-init aos-animate" data-aos="fade-up">
          {% for indicateur in target.indicators %}
          <li>
            <a data-bs-toggle="collapse" data-bs-target="#faq{{indicateur.id}}" class="collapsed" aria-expanded="false">
				<svg class="icon icon-chevron-right" fill="currentColor">
					<use xlink:href="{{asset('frontend/icons/icons-3.7.svg')}}#chevron-right"></use>
				</svg>
				Domaine {{ indicateur.code }} - {{indicateur.name}} 
				<i class="bx bx-chevron-down icon-show"></i><i class="bx bx-x icon-close"></i>
			</a>
            
			<div id="faq{{indicateur.id}}" class="collapse" data-bs-parent=".faq-list">
              <ul style="list-style-type: none;">
										{% for cible in indicateur.cibles %}
											<li style="margin-bottom: -20px;">

												<a href="">
													<svg class="icon icon-chevron-right" fill="currentColor">
														<use xlink:href="{{asset('frontend/icons/icons-3.7.svg')}}#chevron-right"></use>
													</svg>
													Cible : {{ cible.code }}
													-
													{{ cible.name }}
												</a>

												<ul style="list-style-type: none;">
													{% for indicateur in cible.indicateurs %}
														<li style="margin-bottom: 0px;">

															<a href="">
																<svg class="icon icon-chevron-right" fill="currentColor">
																	<use xlink:href="{{asset('frontend/icons/icons-3.7.svg')}}#chevron-right"></use>
																</svg>
																{{ indicateur.code }}
																-
																{{ indicateur.name }}
															</a>
														</li>
													{% endfor %}
												</ul>
											</li>
										{% endfor %}
									</ul>
            </div>
			
          </li>
          {% endfor %}
        </ul>

      </div>
    </section>

				
			</div>

		</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}}
  },
  legend: {
      show: false,
      },
  plotOptions: {
        bar: {
            distributed: true,
        },
    },
  colors: {{colors | json_encode |raw}},
  yaxis: {
	  
	min : 0,
},
}

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

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

{% endblock %}