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

{% block content %}
<div class="container single-template">
	<div class="page-header">
		<h1 class="page-title">
			Aspiration
			{{ goal.code }}
			:
			{{ goal.name }}
		</h1>
	</div>

	<div class="row gx-md-5 gy-3">
		<div class="col-lg-12">

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

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

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


<div class="row gx-md-5 gy-3">
		<div class="col-lg-12">

        </div>

</div>

<div class="page-header">
		<h1 class="page-title">
			Les autres aspirations
		</h1>
	</div>

<div class="row gx-md-5 gy-3">
		{% for g in goals %}
						{% if g.code != goal.code %}
							<div class="col-xl-2 col-lg-2">
								<div class="icon-box">
										<a href="{{ path('aspiration', { 'id': g.id }) }}"> <img src="{{asset('dist/img/agenda2063/aspirations/aspiration')}}{{ g.code }}.png" style="width:100%"></a>
								</div>
							</div>
						{% endif %}
					{% endfor %}

</div>
</div>
{% endblock %}