{% extends "base.html" %}
{% load wagtailimages_tags %}

{% block head-extra %}
  <style>
      /* Needed for Google map embed */
      #map {
        height: 100%;
      }
      .maps.embed-container {
         pointer-events: none;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
  </style>
{% endblock head-extra %}

{% block content-header %}
    <h1>{{ page.title }}</h1>
    <figure>
      {% image self.image fill-600x600 %}
    </figure>
{% endblock content-header %}

{% block content-body %}
    <p>{{ page.address|linebreaks }}</p>
    <div id="map" class="maps embed-container"></div>

    {% for hours in page.opening_hours %}
        <li>{{ hours }}</li>
    {% endfor %}

    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {
              lat: {{lat}},
              lng: {{long}}
          },
          zoom: 8
        });
        var marker = new google.maps.Marker({
          position: {
              lat: {{lat}},
              lng: {{long}}
          },
          map: map,
          title: '{{page.title}}'
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD31CT9P9KxvNUJOwDq2kcFEIG8ADgaFgw&callback=initMap" async defer></script>

{% endblock content-body %}