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

{% block content %}
	<div class="container single-template">
		<div class="page-header">
			<h1 class="page-title">
				Les ministères
			</h1>
		</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 ministere in ministeres %}
          <li>
            <a data-bs-toggle="collapse" data-bs-target="#faq{{ministere.id}}" class="collapsed" aria-expanded="false">{{ministere.name}} <i class="bx bx-chevron-down icon-show"></i><i class="bx bx-x icon-close"></i></a>
            {% if ministere.indicators | length  > 0 %}
			<div id="faq{{ministere.id}}" class="collapse" data-bs-parent=".faq-list">
              <p style="margin-left: 20px; color:red; margin-bouttom: 10px;">
			  		Les indicateurs que le ministère renseigne
              </p>
			  <ul style="list-style-type: none;">
			  {% for indicateur in ministere.indicators %}
						<li style="margin-bottom: 10px; padding-bottom: 0px;">

							<a href="{{ path('indicateur', { 'id': indicateur.id }) }}">
								<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>
					{% if ministere.code=='MEF' and indicatorsinstad | length  > 0 %}
					<p style="margin-left: 20px; color:red; margin-bouttom: 10px;">
			  			Les indicateurs renseignés par l'Institut National de la Statistique et de la Démographie (INSTaD)
					</p>
					<ul style="list-style-type: none;">
					{% for indicateur in indicatorsinstad %}
								<li style="margin-bottom: 10px; padding-bottom: 0px;">

									<a href="{{ path('indicateur', { 'id': indicateur.id }) }}">
										<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>
					{% endif %}

            </div>
			{% else %}
				<div id="faq{{ministere.id}}" class="collapse" data-bs-parent=".faq-list">
					<p style="margin-left: 20px;">
							Ce ministère ne renseigne directement aucun indicateur.
					</p>
				</div>
			{% endif %}
          </li>
          {% endfor %}
        </ul>

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