{% extends '@AdminLTE/layout/public-layout.html.twig' %}

{% block page_title %}Les cibles de l'ODD {{ goal.code }}{% endblock %}
{% block page_subtitle %}{% endblock %}
{% block page_breadcrumb %}
	<a href="{{ path('services') }}">L'Agenda 2030</a>
{% endblock %}
{% block page_breadcrumb2 %}
	<a href="{{ path('index_goal', { 'id': goal.code }) }}"> / ODD
		{{ goal.code }}</a>
{% endblock %}
{% block page_breadcrumb3 %}
	Les cibles
{% endblock %}

{% block page_content %}


	<!-- ======= Blog Section ======= -->
	<section id="blog" class="blog">
		<div class="container">


			<div class="row">

				<div class="col-lg-12 entries">

					<article class="entry entry-single">

						<ul class="nav nav-tabs nav-justified mb-5" id="pills-tab" role="tablist">
						{% for t in targets %}
							<li class="nav-item" role="presentation">
								<a class="nav-link {% if t.id==target.id %} active {% endif %}" id="cible-{{t.id}}-tab" data-toggle="pill" href="#cible-{{t.id}}" role="tab" aria-controls="cible-{{t.id}}" aria-selected="true">Cible {{t.code}}</a>
							</li>
							{% endfor %}
						</ul>
						<div class="tab-content" id="pills-tabContent">
							<br>
							{% for t in targets %}
							<div class="tab-pane fade show {% if t.id==target.id %} active {% endif %}" id="cible-{{t.id}}" role="tabpanel" aria-labelledby="cible-{{t.id}}-tab">
								<h2 class="entry-title" style="color:#043466;">
									Cible
									{{ t.code }}
									:
									{{ t.name }}
								</h2>
								<p>{{ t.description }}</p>
								<br>


								<h2 class="entry-title" style="color:#043466;">Situation de la cible au Bénin
									{{t.code}}</h2>
								
								<br>
								<div> </div>
								<h2 class="entry-title" style="color:#043466;">Les indicateurs de la cible
									{{t.code}}</h2>
								<ul>
									{% set indicators = t.getIndicators() %}
									{% for indicator in indicators %}
										<li>
											<a href="{{ path('index_target', { 'id': indicator.id }) }}">
												{{ indicator.code }}
												-
												{{ indicator.name }}</a>
										</li>
									{% endfor %}
								</ul>
							</div>
							{% endfor %}
						</div>

					</article>
				</div>
			</div>
			<!-- End blog entries list -->

		</div>

	</div>
</section>
<!-- End Blog Section -->
{% endblock %}