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

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

{% block body %}

	{% if app.user %}

	<div>

		
		{# <div>
			<button id="showzone" type="button" class="btn btn-primary">Voir</button>
			<button id="addzone" type="button" class="btn btn-primary">Créer</button>
			<button id="editzone" type="button" class="btn btn-primary">Editer</button>

		</div>

		<div>
			<select id="devices" class="form-select">
			</select> 
		</div> #}

		
		<div class="mt-2 ml-1" id="devicescheckbox">
			{% for device in devices %}
				{# <div class="form-check form-check-inline">
					<input class="form-check-input" type="checkbox" id="DEVICE-{{device.id}}" value="{{device.id}}">
					<label class="form-check-label" for="DEVICE-{{device.id}}">{{ device.identifiant }}</label>
				</div> #}

				<div class="btn-group">
    				<input type="checkbox" class="btn-check" id="DEVICE-{{device.id}}" value="{{device.id}}" autocomplete="off">
    				<label class="btn btn-sm btn-outline-primary" for="DEVICE-{{device.id}}">{{ device.identifiant }}</label>	
				</div>
			{% endfor %}


		</div> 

		{# <div>
			<input id="name" class="w-100" type="text" name="name" value="">

			
		</div> #}

		
		<div class="row">
			<div class="input-group col-6 ml-1">
					<span class="input-group-text">Nom de la zone</span>
					<input id="name" type="text" class="form-control" name="name" value="" placeholder="Saisir le nom de la zone avant création">
					<span id="passwordHelpInline" class="form-text ml-2">
						Une zone peut être associée à plusieurs devices.
					</span>
			</div>
		</div>


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

	{% endif  %}

	{# <!-- Button trigger modal -->
	<div class="standsList" data-stands = "{{ exhibitionStandList }}" >
	<div class="hall" data-hall="{{ hall }}"> #}
	<div class="mapid" data-mapid="{{ map_id }}"></div>
	<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/zone.js') }}"></script>
		{# <script src="{{ asset('build/ajax/apiJS.js') }}"></script> #}


{% endblock %}