{% extends "baseMapZone.html.twig" %}

{% block title %}Map:edit{% endblock %}

{% block body %}

	{% if app.user %}

		<div class="row col-4">
			<select id="zones" class="form-select">
				<option value="" selected>Choisir une zone de parcours</option>
				{% for zone in zones %}
					<option value="{{zone}}">{{zone}}</option>
				{% endfor %}

			</select> 
		</div> 


		 <div class="border mt-2 ml-1" id="devicescheckbox">
			
		</div>  


		<div id="pictos" class="border">
			{% for picto in pictos %}
				<img id="{{ picto.id }}" class="img-fluid picto border border-3" src={{ "/images/application/" ~ picto.image }} style="width:50px; height:50px">
			{% endfor %}
		</div>
	

	<div class ="border" id="mapid" style="width: 100%; height: 85vh;"></div>
	

	{% endif  %}

	<div class="mapid" data-mapid="{{ map_id }}">
	<div class="mapfilename" data-map-filename="{{ map_filename }}">

	</div>

{% endblock %}

{% block javascripts %}
	{{ parent() }}

		<script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script> 
		<script type="module" src="{{ asset('build/leaflet/parcours.js') }}"></script>
	

{% endblock %}