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

{% block page_title %}ODD
	{{ goal.code }}
	:
	{{goal.name}}
{% endblock %}
{% block page_subtitle %}{% endblock %}
{% block page_breadcrumb %}
	<a href="{{ path('services') }}">L'Agenda 2030 </a> 
{% endblock %}
{% block page_breadcrumb2 %} / L'ODD
	{{ goal.code }}
{% endblock %}

{% block page_content %}


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

			<div class="row">

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

					<div class="row">

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

							<article class="entry entry-single">

								<div class="entry-img">
									<img src="" alt="" class="img-fluid">
								</div>

								<h2 class="entry-title" style="color:#043466;">
									ODD
									{{ goal.code }}:
									{{ goal.name }}
								</h2>
								<h2 class="entry-title">{{ goal.description }}</h2>
								<br>
								{% set file =  'html/goal_'  ~  goal.code  ~ '.html' %}
								{% include file %}


							</article>
						</div>
					</div>
					<div class="row">

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

							<article class="entry entry-single">
								<h2 class="entry-title" style="color:#043466;">Cibles prioritaires de l'ODD
									{{goal.code}}</h2>
								<ul>
									{% for target in targets %}
										<li><a href="{{ path('index_target', { 'id': target.id }) }}"> {{ target.code }}
											-
											{{ target.name }}</a></li>
									{% endfor %}
								</ul>


							</article>
						</div>
					</div>
					<!-- End blog entry -->

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

				<div class="col-lg-4">

					<div class="sidebar">

						<h3 class="sidebar-title">Les ODD</h3>
						<div class="row">
							{% for g in goals %}
								{% if g.code != goal.code %}
									<div class="col-md-6">
										<div class="icon-box">
											<!--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('index_goal', { 'id': g.id }) }}"> <img src="{{asset('dist/img/goal-')}}{{ g.code }}.png" style="width:100%"></a>
										</div>
									</div>
								{% endif %}
							{% endfor %}
						</div>

					</div>
					<!-- End sidebar -->

				</div>
				<!-- End blog sidebar -->

			</div>


            <div class="row">

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

							<article class="entry entry-single">
								<h2 class="entry-title" style="color:#043466;">L'ODD
									{{goal.code}} au Bénin</h2>
							</article>
						</div>
					</div>

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

{#% block message %}

    {% embed '@AdminLTE/Widgets/box-widget.html.twig' %}
        {% block box_body %}
            {% include 'html/goal_0.html' %}

            <div class="card card-primary card-outline card-outline-tabs">
                <div class="card-header p-0 border-bottom-0">
                    <ul class="nav nav-tabs" id="custom-tabs-three-tab" role="tablist">
                    {% set item = 0 %} 
                    {% set number = rows|keys|length %}
                    {% for key in rows|keys %}
                        {% set item = item + 1 %}
                        <li class="nav-item">
                            <a class="nav-link{% if (item == number) %} active{% endif %}" 
                                id="custom-tabs-{{key}}-tab" 
                                data-toggle="pill" 
                                href="#custom-tabs-{{key}}" 
                                role="tab" 
                                aria-controls="custom-tabs-{{key}}" 
                                aria-selected="{% if (item == number) %}true{% else %}false{% endif %}">
                                    {{key}}
                            </a>
                        </li>
                    {% endfor %}
                    </ul>
                </div>
                <div class="card-body">
                    <div class="tab-content" id="custom-tabs-three-tabContent">
                    {% set item = 0 %} 
                    {% for key in rows|keys %}
                        {% set item = item + 1 %}
                        {% set datas = rows[key] %}
                        <div class="tab-pane fade{% if (item == number) %} show active{% endif %}" 
                            id="custom-tabs-{{key}}" 
                            role="tabpanel" 
                            aria-labelledby="custom-tabs-{{key}}-tab">
                        
                            <table class="table" style="width: 100%;">
                            <thead>
                                <tr>
                                    <th style="width: 10px">#</th>
                                    <th>ODD</th>
                                    <th style="width: 150px">Sensibilité</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for data in datas %}
                                <tr>
                                    <td>{{data.id}}.</td>
                                    <td>{{data.goal.name}}</td>
                                    <td>
                                        <div class="progress progress-xm mt-1">
                                            <div class="progress-bar" style="background-color: {{data.goal.color}}; width: {{data.sensitivity}}%;">{{data.sensitivity}}%</div>
                                        </div>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                            </table>
                
                        </div>
                    {% endfor %}
                    </div>
                </div>
            </div>

        {% endblock %}
    {% endembed %}

{% endblock %#}