{% extends "main/layout.html" %}
{% block content %}
<div class="breadcrumb-holder">
	<div class="container-fluid">
		<ul class="breadcrumb">
			<li class="breadcrumb-item active">{{ legend|upper }}</li>
		</ul>
	</div>
</div>
<div class="container-fluid"><br/>
	{% if painel_check %}
	<div class="row">
		<div class="col">
			<div class="card">
				<div class="card-header">Painel Rekrutamentu</div>
				<div class="card-body">
					<div class="row">
						<div class="col-sm-6">
							<table class="table table-sm">
								<tr>
									<th>Divizaun</th><td>{{ recplan.unit }}</td>
								</tr>
								<tr>
									<th>Objectivu</th><td>{{ recplan.objective }}</td>
								</tr>
								<tr>
									<th>Data</th><td>{{ recplan.date|date:"d/m/Y" }}</td>
								</tr>
							</table>
						</div><!--end col-->
						<div class="col-sm-6">
							<table class="table table-sm">
								<tr><th>Vaga</th><th>Pojisaun</th></tr>
								{% for painel in painels %}
								<tr>
									<td><a href="{% url 'rec2-u-cand-list' painel.plan_pos.id painel_check.id %}">{{ painel.plan_pos.position }}</a></td>
									<td>{{ painel.position }}</td>
								</tr>
								{% endfor %}
							</table>
						</div><!--end col-->
					</div><!--end row-->
				</div>
			</div><!--end card-->
		</div><!--end col-->
	</div><!--end row-->
	{% endif %}
	<div class="row">
		<div class="col-sm-12">
			<div class="card shadow-lg border-info rounded">
				<div class="card-header border-primary"><h3>{{ 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> </h3>
				</div>
				<div class="card-body">
					<div class="row">
						<div class="col-sm-6">
							{% include 'home/home_staff_left.html' %}
						</div> <!--end col-->
						<div class="col-sm-6">
							{% include 'home/home_staff_right.html' %}
							<hr/>
							<div id="mapid" style="width: 100%; height: 250px;"></div>
							<hr/>
							<table class="table table-sm">
								<tr class="bg-light">
									<th colspan="5"><h6>ABILIDADE LINGUA</th>
								</tr>
								<tr><th>Lingua</th><th>Koalia</th><th>Lee</th><th>Hakerek</th</tr>
								{% for lg in emplang %}
								<tr>
									<td>{{ lg.language }}</td>
									<td>{{ lg.speak }}</td>
									<td>{{ lg.read }}</td>
									<td>{{ lg.write }}</td>
								</tr>
								{% endfor %}
							</table>
						</div> <!--end col-->
					</div> <!--end row-->
					<hr/>
					<div class="row">
						<div class="col-sm-12">
							{% include 'home/home_staff_bottom.html' %}
						</div> <!--end col-->
					</div> <!--end row-->
				</div> <!--end card-body-->
			</div> <!--end card-->
		</div> <!--end col-->
	</div> <!--end row-->
</div>
{% 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 %}