{% extends 'base.html' %}
{% set version2 = False %}
 
{% block container %}
  {% if current_user.is_authenticated %}
  	{#<div class="jumbotron" ng-init="display.list = false"> 
  		<h3>Data Center Operations Dashboard</h3>
  	</div>#}
    <div class="panel panel-default">
      <div class="panel-heading">
        Location Map
        {% if includeBol == True %}
        <a class="pull-right" href="{{url_for('data.home')}}"><button class="btn btn-primary backgroundLightPurple darkAccent" style="padding: 4px 16px;"/>Show Only Current</button></a>
        {% endif %}
        {% if includeBol == False %}
        <a class="pull-right" href="{{url_for('data.home')}}?include=upcomming"><button class="btn btn-primary backgroundLightPurple darkAccent" style="padding: 4px 16px;"/>Include Upcomming</button></a>
        {% endif %}
      </div>
      <div class="panel-body" style="padding:0px">
        <div id="map" style='height: 470px;width: 100%;border-bottom: 6px;'></div>
        <script>
          function initMap() {
            var mapDiv = document.getElementById('map');
            var map = new google.maps.Map(mapDiv, {
              center: {lat: 37.364191, lng: -121.958867},
              zoom: 2
            });
            {%- for key, value in popDict.iteritems() %}
            var infowindow{{key}} = new google.maps.InfoWindow({
              content: '<div><a href="' + '{{url_for("data.pop_details")}}' +
                '?name=' + '{{key}}' + '">' + '<button class="btn btn-primary lightAccent">{{key}}</button>' + '</a></div>'
            });
            var marker{{key}} = new google.maps.Marker({
              position: {{value}},
              map: map,
              title: '{{key}}'
            });
            marker{{key}}.addListener('click', function() {
              map.setZoom(8);
              map.setCenter(marker{{key}}.getPosition());
              infowindow{{key}}.open(map,marker{{key}})
            });
            {% endfor -%}

            {#map.addListener('center_changed', function() {
              window.setTimeout(function() {
                map.setZoom(2);
                map.panTo(markerSJC02.getPosition());
              }, 5000);
            });#}
          }
        </script>
        <script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
        async defer></script>
      </div>
    </div>
  {% else %}
  <div class="jumbotron">
  	<h3>Authorized Access Only</h3>
  	<h4><a href="{{ url_for('auth.login') }}">Click Here To Login</a></h4>
  </div>
  {% endif %}
{% endblock %}
{% block scripts %}
{% endblock %}