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

{% block css %}
	<style>
		.active {
    		background: #FFFFFF;
		}
		.active a {
			color: #023b6d !important;
		}
	</style>
{% endblock %}

{% block content %}
<div class="container single-template">
    <div class="page-header">
		<h1 class="page-title">
			Les normes d'action
		</h1>
	</div>

    <div class="container row" style="margin-top: 20px;">

	<!-- Nav tabs -->
		<ul class="nav nav-pills nav-fill">
			{% for departement in departements %}
				<li class="nav-item">
					<a class="nav-link {{departement.id==1 ? 'active' : ''}}" data-bs-toggle="tab" href="#{{departement.name}}">{{departement.name}}</a>
				</li>
			{% endfor %}
		</ul>

		<!-- Tab panes -->
		<div class="tab-content">
			{% for departement in departements %}
				<div class="tab-pane container {{departement.id==1 ? 'active' : ''}}" id="{{departement.name}}">
				
					<section id="faq" class="faq" style="margin-top : 30px;">
						<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 commune in settingsManager.getCommunesByDepartement(departement) %}
							<li>
								<a data-bs-toggle="collapse" data-bs-target="#commune{{commune.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>
									{{commune.name}} 
									<i class="bx bx-chevron-down icon-show"></i><i class="bx bx-x icon-close"></i>
								</a>
								
								<div id="commune{{commune.id}}" class="collapse" data-bs-parent=".faq-list">
								<ul style="list-style-type: none;">
															{% for norme in commune.normeActionCommunes %}
																<li style="margin-top: 10px; 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>
																		Norme : {{ norme.code }}
																		-
																		{{ norme.name }}
																	</a>
																</li>
															{% endfor %}
														</ul>
								</div>
								
							</li>
							{% endfor %}
							</ul>

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


</div>
{% endblock %}