{% extends '::base.html.twig' %}

{% block body %}
	<div class="container">
		<table class="table table-hover table-responsive">
			<thread>
				<tr>
					<th> </th>
					<th>Nom</th>
					<th>Ville</th>
					<th>Adresse</th>
					<th>Coordonnees</th>
					<th>Note Moyen</th>
					<th>nombre de votes</th>
				</tr>
			</thread>
			<tbody>
			
				<tr>
					<td>{{ muse.id }}</td>
					<td>{{ muse.nom }} </td>
					<td>{{ muse.ville }} </td>
					<td>{{ muse.adresse }} </td>
					<td>{{ muse.coordonnees }} </td>
					<td>{{ moyNote.MOY }} </td>
					<td>{{ moyNote.nbVot }} </td>
				</tr>
			
			</tbody>
		</table>
		<button type="button" class="btn btn-primary" id="b1">Add Comment</button>
	
	
	</div>
	

	<div class='container'>
		
			{{ form_start(form) }}
			{{ form_widget(form) }}
			<button type="submit" class="btn btn-primary">Submit</button>
			{{ form_end(form) }}
		
	</div>
	<div class="container">
		<div id="map" style="height: 400px; "></div>
	</div>
	{% block javascripts %}
		<script>
		$('form').hide();
		$('#b1').click(function(){
						$('form').show();
						$('#b1').hide();
		
					});
		
	
		function draw_map(data) {  
		

		  var map = L.map('map');
		  var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
		  var osmAttrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
		  var osm = new L.TileLayer(osmUrl, {minZoom: 8, maxZoom: 14, attribution: osmAttrib});		
		  map.setView(new L.LatLng(48.86, 2.34),12);
		  map.addLayer(osm);
		  var marker;
		  data.forEach(function(musee){
		    marker = L.marker([musee.lat, musee.lon]).addTo(map);
		    marker.bindPopup("<b>"+musee.nom+"</b>").openPopup();
		  });
		  marker.openPopup();
		}
		
		var strCoord = '{{ muse.coordonnees }}';
		var splits = strCoord.split(",", 2);
		var data = [
		  {
		    nom:'{{ muse.nom }}',
		    lat:splits[0],
		    lon:splits[1]
		  },
		];

		draw_map(data);
		
	
		</script>



	{% endblock %}
{% endblock %}
