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

{% block content %}

    <style>
      /* Needed for Google map embed */
      #map {
        height: 100%;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>

    <h1>{{ page.title }}</h1>
    <figure>
      {% image self.image fill-600x600 %}
    </figure>
    <p>{{ page.address }}</p>
    <p>{{ page.lat_long }}</p>

    <div id="map"></div>
    <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>

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