{% extends "base_with_jumbo.html" %}
{% load bootstrap3 %}
{% load i18n %}
{% load leaflet_tags %}
{% load static %}

{% block stylesheets %}
	{{ block.super }}
  {% leaflet_css %}
  <style>
  html, body, #main {
    width: 100;	height:100%;
  }
  .leaflet-popup-content > a{
    color: #fff;
  }
  </style>
{% endblock %}


{% block title %}{% trans "Ojuso Platform Map" %}{% endblock %}


{% block inner_content %}
  <div id="main"></div>
	<div id="modals"></div>
{% endblock %}


{% block scripts %}
  {% leaflet_map "main" callback="main_app_init" creatediv=False %}
  {% leaflet_js %}
  <script type="text/javascript" src="{% static 'map/plugins/leaflet-hash.js' %}"></script>
  <script type="text/javascript">
  
  	// This takes HTML as a string and returns an element
  	function create(htmlStr) {
  		    var frag = document.createDocumentFragment(),
  			        temp = document.createElement('div');
  		    temp.innerHTML = htmlStr;
  		    while (temp.firstChild) {
  					        frag.appendChild(temp.firstChild);
  					    }
  		    return frag;
  	}
  
    // This is called when the map is initialized
  	function main_app_init(map, options) {
        var hash = new L.hash(map);
  		// Pull data as GeoJSON and add to map with a modal
  		$.getJSON('/api/case-studies/', function (data) {
  			L.geoJson(data, {
					onEachFeature: function (feature, layer) {
  					var modalname = "case-study-"+feature.id
  				  layer.bindPopup(
							"<p>"+feature.properties.entry_name+"</p>"+
							"<a class='btn btn-primary' href='case-study/"+feature.properties.slug+"' role='button'>"
						    +"{% trans "View" %}"+"</a>"
						);
						var modal = create(
							"<div class='modal fade' id='"+modalname+"' tabindex='-1' role='dialog' aria-labelledby='"+modalname+"-label'>"+
							  "<div class='modal-dialog' role='document'>"+
							    "<div class='modal-content'>"+
							      "<div class='modal-header'>"+
							        "<button type='button' class='close' data-dismiss='modal' aria-label='{% trans "Close" %}'>"+
							          "<span aria-hidden='true'>&times;</span>"+
							        "</button>"+
							        "<h4 class='modal-title' id='"+modalname+"-label'>"+
							          feature.properties.project_name+
							        "</h4>"+
							      "</div>"+
							      "<div class='modal-body'>"+
							        "<p>"+feature.properties.description+"</p>"+
											"<dl class='dl-horizontal'>"+
												"<dt>Supply Chain</dt><dd>"+feature.properties.supply_chain+"</dd>"+
												"<dt>Generation Type</dt><dd>"+feature.properties.generation_type+"</dd>"+
												"<dt>Associated Companies</dt><dd>"+feature.properties.associated_companies+"</dd>"+
												"<dt>Financiers</dt><dd>"+feature.properties.financiers+"</dd>"+
												"<dt>Important Lenders</dt><dd>"+feature.properties.important_lenders+"</dd>"+
												"<dt>Country</dt><dd>"+feature.properties.country+"</dd>"+
												"<dt>Affects Indigenous</dt><dd>"+feature.properties.affects_indigenous+"</dd>"+
												"<dt>Affects Indigenous Reason</dt><dd>"+feature.properties.affects_indigenous_reason+"</dd>"+
												"<dt>Proposed Start</dt><dd>"+feature.properties.proposed_start+"</dd>"+
												"<dt>Proposed Completion</dt><dd>"+feature.properties.proposed_completion+"</dd>"+
												"<dt>Link to Forum</dt><dd>"+feature.properties.link_to_forum+"</dd>"+
												"<dt>Image</dt><dd>"+feature.properties.image+"</dd>"+
												"<dt>References</dt><dd>"+feature.properties.references+"</dd>"+
												"<dt>Commodities</dt><dd>"+feature.properties.commodities+"</dd>"+
												"<dt>Like to Engage Developer</dt><dd>"+feature.properties.like_to_engage_developer+"</dd>"+
												"<dt>Like to Engage Investors</dt><dd"+feature.properties.like_to_engage_investors+"></dd>"+
												"<dt>Author</dt><dd>"+feature.properties.author+"</dd>"+
							 				"</dl>"+
							      "</div>"+
							      "<div class='modal-footer'>"+
							        "<button type='button' class='btn btn-default' data-dismiss='modal'>"+
							          "{% trans "Close" %}"+
							        "</button>"+
							        "<button type='button' class='btn btn-primary'>"+
							          "{% trans "Save changes" %}"+
							        "</button>"+
							      "</div>"+
						      "</div>"+
							  "</div>"+
						  "</div>"
						);
  					document.getElementById('modals').appendChild(modal);
  			  }
  			}).addTo(map);
  		});
  
  		<!--// Add an on-click listener for map click events. Show popup with button to submit a casestudy-->
  		<!--map.on('click', function(e) {-->
  		  <!--var popup = L.popup()-->
  			  <!--.setLatLng(e.latlng)-->
					<!--.setContent("<a class='btn btn-primary btn-sm' href='{% url 'create' %}?lat="+e.latlng.lat+"&lng="+e.latlng.lng+"' role='button'>{% trans "Submit a Case Study" %}</a>")-->
  			  <!--.openOn(map);-->
  		<!--});-->
  	}
  </script>
{% endblock %}