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

{% block page_title %}
	Carte interactive
{% endblock %}
{% block page_subtitle %}{% endblock %}
{% block page_breadcrumb %}
	Carte interactive
{% endblock %}

{% block page_content %}


	<!-- ======= Blog Section ======= -->
	<section id="blog" class="blog">
		<div class="container">
			<div class="row">
				<div class="col-lg-4 entries">
					<svg version="1.1" id="Benin" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="540px" viewbox="0 0 432 755" style="enable-background:new 0 0 432 755;" xml:space="preserve">
						<defs>
							<style>
								#carte path {
									cursor: pointer;
								}
								path:hover {
									opacity: .5;
								}
							</style>
						</defs>
						{% for departement in departements %}
						<a onclick="chargerCommune({{departement.id}})" class="tooltips" data-container="body" data-original-title="{{departement.name}}">
							<path
								id="departement{{departement.id}}" style="fill-rule:evenodd;clip-rule:evenodd;fill:#dff1fd;stroke:#000;stroke-width:1;stroke-miterlimit:10;" d="{{departement.coordonnee}}"><title>{{departement.name}}</title>
							</path>
						</a>
						{% endfor %}
					</svg>
				</div>
				<div class="col-lg-8 entries" style="height:540px;overflow-y: scroll;">
				</div>
			</div>

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