{% extends "main/layout.html" %}
{% block content %}
<div class="container-fluid"><br/>
	<div class="row">
		<div class="col-sm-12">
			<div class="card shadow-lg pt-1 border-primary rounded">
				<div class="card-header border-primary">
					<h2>
						{{ legend|upper }} <i class="fa fa-long-arrow-right"></i>
						<a class="btn btn-sm btn-info" href="{% url 's-emp-attach' objects.hashed %}" target="_blank">Attachments <i class="fa fa-vcard"></i></a>
					</h2>
				</div>
				<div class="card-body">
					<div class="row">
						<div class="col-sm-6">
							{% include 'profile/profile_left.html' %}
						</div> <!--end col-->
						<div class="col-sm-6">
							{% include 'profile/profile_right.html' %}
							<hr/>
							<div id="mapid" style="width: 100%; height: 250px;"></div>
						</div> <!--end col-->
					</div> <!--end row-->
					<hr/>
					<div class="row">
						<div class="col-sm-12">
							{% include 'profile/profile_bottom.html' %}
						</div> <!--end col-->
					</div> <!--end row-->
				</div> <!--end card-body-->
			</div> <!--end card-->
		</div> <!--end col-->
	</div> <!--end row-->
</div><!--end container-fluid-->
{% endblock %}
{% block scripts %}
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
	<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
	<script>
		var mymap = L.map('mapid').setView([{{ addtl.latitude }}, {{ addtl.longitude }}], 15);

		L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
			maxZoom: 18,
			attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
				'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
				'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
			id: 'mapbox/streets-v11',
			tileSize: 512,
			zoomOffset: -1
		}).addTo(mymap);

		L.marker([{{ addtl.latitude }}, {{ addtl.longitude }}]).addTo(mymap)
			.bindPopup("{{ addtl.address|upper }}").openPopup();

		var popup = L.popup();

		function onMapClick(e) {
			popup
				.setLatLng(e.latlng)
				.setContent("You clicked the map at " + e.latlng.toString())
				.openOn(mymap);
		}

		mymap.on('click', onMapClick);

	</script>
{% endblock %}