{% set active_page = 'Maps' -%}

{% extends "layouts/" + layout + ".html" %}

{% block styles %}
<style>
  #map {
    height: 100%;
    width: 100%;
  }
</style>
{% endblock %}

{% block content %}
  <div id="map"></div>
  <div class="portal-map">
    <div class="mdc-layout-grid">
      <div class="mdc-layout-grid__inner">
        <div class="mdc-layout-grid__cell--span-4-desktop mdc-layout-grid__cell--span-4-tablet mdc-layout-grid__cell--span-4-phone  mdc-layout-grid__cell--span-1-tablet mdc-layout-grid__cell--span-4-phone">
          <div class="mdc-card portal-card portal-card--center portal-card--demo mdc-elevation--z24">
            <div class="mdc-list mdc-list--two-line mdc-list--avatar-list">
              <div class="mdc-list-item mdc-list-item--selected">
                <img class="mdc-list-item__graphic" src="{{ base }}assets/images/male/4.jpg" width="56" height="56" alt="Brown Bear">
                <span class="mdc-list-item__text">
                  Astrid Edeleanu
                  <span class="mdc-list-item__secondary-text">(336) 202 8222</span>
                </span>
                <i class="mdc-list-item__meta fa fa-map-marker mdc-theme--secondary"></i>
              </div>
              <div class="mdc-list-item">
                <img class="mdc-list-item__graphic" src="{{ base }}assets/images/male/1.jpg" width="56" height="56" alt="Brown Bear">
                <span class="mdc-list-item__text">
                  Faisal Khan
                  <span class="mdc-list-item__secondary-text">(195) 170 5838</span>
                </span>
                <i class="mdc-list-item__meta fa fa-map-marker"></i>
              </div>
              <div class="mdc-list-item">
                <img class="mdc-list-item__graphic" src="{{ base }}assets/images/male/2.jpg" width="56" height="56" alt="Brown Bear">
                <span class="mdc-list-item__text">
                  Tom McGuiness
                  <span class="mdc-list-item__secondary-text">(504) 424 8294</span>
                </span>
                <i class="mdc-list-item__meta fa fa-map-marker"></i>
              </div>
              <div class="mdc-list-item">
                <img class="mdc-list-item__graphic" src="{{ base }}assets/images/male/3.jpg" width="56" height="56" alt="Brown Bear">
                <span class="mdc-list-item__text">
                  Kimon Lauterbach
                  <span class="mdc-list-item__secondary-text">(104) 646 6317</span>
                </span>
                <i class="mdc-list-item__meta fa fa-map-marker"></i>
              </div>
              <div class="mdc-list-item">
                <img class="mdc-list-item__graphic" src="{{ base }}assets/images/male/5.jpg" width="56" height="56" alt="Brown Bear">
                <span class="mdc-list-item__text">
                  Emmy Lueilwitz
                  <span class="mdc-list-item__secondary-text">(426) 535 5053</span>
                </span>
                <i class="mdc-list-item__meta fa fa-map-marker"></i>
              </div>
            </div>
          </div>
          <div class="mdc-card portal-card portal-card__pin mdc-elevation--z24 mdc-theme--secondary-bg mdc-theme--text-secondary-on-secondary">
            <div class="portal-card__content portal-text-center">
              <div class='portal-maps-contact-detail-card__pin'></div>
              <div class='portal-maps-contact-detail-card__pulse'></div>
              <span class="mdc-typography--body2 ">
                Click on one of the map markers or the avatars above in order to view that person's details!
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}

{% block scripts %}
<script>
  function initMap() {
    let position = {lat: 40.748817, lng: -73.935242};
    let map = new google.maps.Map(document.getElementById('map'), {
      zoom: 8,
      center: position,
      zoomControl: false,
      scrollwheel: false,
      mapTypeControl: false,
      fullscreenControl: false,
      styles: [
      {
        "featureType": "all",
        "elementType": "geometry.fill",
        "stylers": [
          {
            "weight": "2.00"
          }
        ]
      },
      {
        "featureType": "all",
        "elementType": "geometry.stroke",
        "stylers": [
          {
            "color": "#9c9c9c"
          }
        ]
      },
      {
        "featureType": "all",
        "elementType": "labels.text",
        "stylers": [
          {
            "visibility": "on"
          }
        ]
      },
      {
        "featureType": "landscape",
        "elementType": "all",
        "stylers": [
          {
            "color": "#f2f2f2"
          }
        ]
      },
      {
        "featureType": "landscape",
        "elementType": "geometry.fill",
        "stylers": [
          {
            "color": "#ffffff"
          }
        ]
      },
      {
        "featureType": "landscape.man_made",
        "elementType": "geometry.fill",
        "stylers": [
          {
            "color": "#ffffff"
          }
        ]
      },
      {
        "featureType": "poi",
        "elementType": "all",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      },
      {
        "featureType": "road",
        "elementType": "all",
        "stylers": [
          {
            "saturation": -100
          },
          {
            "lightness": 45
          }
        ]
      },
      {
        "featureType": "road",
        "elementType": "geometry.fill",
        "stylers": [
          {
            "color": "#eeeeee"
          }
        ]
      },
      {
        "featureType": "road",
        "elementType": "labels.text.fill",
        "stylers": [
          {
            "color": "#7b7b7b"
          }
        ]
      },
      {
        "featureType": "road",
        "elementType": "labels.text.stroke",
        "stylers": [
          {
            "color": "#ffffff"
          }
        ]
      },
      {
        "featureType": "road.highway",
        "elementType": "all",
        "stylers": [
          {
            "visibility": "simplified"
          }
        ]
      },
      {
        "featureType": "road.arterial",
        "elementType": "labels.icon",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      },
      {
        "featureType": "transit",
        "elementType": "all",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      },
      {
        "featureType": "water",
        "elementType": "all",
        "stylers": [
          {
            "color": "#46bcec"
          },
          {
            "visibility": "on"
          }
        ]
      },
      {
        "featureType": "water",
        "elementType": "geometry.fill",
        "stylers": [
          {
            "color": "#c8d7d4"
          }
        ]
      },
      {
        "featureType": "water",
        "elementType": "labels.text.fill",
        "stylers": [
          {
            "color": "#070707"
          }
        ]
      },
      {
        "featureType": "water",
        "elementType": "labels.text.stroke",
        "stylers": [
          {
            "color": "#ffffff"
          }
        ]
      }]
    });
    let marker = new google.maps.Marker({
      position: position,
      map: map
    });
  }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDXVUKDvaxn13Atl_SPuQj2g5MK-C1RYRs&callback=initMap"></script>
{% endblock %}