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

{% block head-extra %}
    <style>
        /* Following two selectors needed for Google map embed */
        #map {
            height: 100%;
        }
    </style>
{% endblock head-extra %}

{% block content %}
    {% image self.image fill-1920x600 as hero_img %}
    <div class="container-fluid hero" style="background-image:url('{{ hero_img.url }}')">
        <div class="hero-gradient-mask"></div>
            <div class="container">
                <div class="row">
                    <div class="col-md-7">
                        <h1>{{ page.title }}</h1>
                        <p class="stand-first">
                            {% if page.is_open %}
                                This location is currently open
                            {% else %}
                                Sorry, this location is currently closed
                            {% endif %}
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div class="container">
            <div class="row">
                <div class="col-md-7">
                    <div class="row">
                    {% if page.introduction %}
                        <div class="intro col-md-7"><p>{{ page.introduction }}</p></div>
                    {% endif %}

                    {% if page.operating_hours %}
                        <div class="col-md-4 col-md-offset-1 location-opening">
                        <h3>Opening hours</h3>
                        {% for hours in page.operating_hours %}
                            <time itemprop="openingHours" datetime="{{ hours }}" class="location-time">
                            <span class="day">{{ hours.day }}</span>:
                            <span class="hours">
                                {% if hours.closed == True %}
                                    Closed
                                {% else %}
                                {% if hours.opening_time %}
                                    {{ hours.opening_time }}
                                {% endif %} -
                                {% if hours.closing_time %}
                                    {{ hours.closing_time }}
                                {% endif %}
                                {% endif %}
                                </span></time>
                        {% endfor %}
                        </div>
                    {% endif %}
                    </div>
                </div>
            </div>
        </div>
        <div class="container-flex">
            <div class="row">
                <div class="col-md-2 col-md-offset-5 location-address">
                    <h3>Address</h3>
                    <address>{{ page.address|linebreaks }}</address>
                </div>
            </div>

            <div class="map-container">
                <div id="map" class="maps embed-container"></div>
            </div>
        </div>

        <div class="container">
            <div class="row">
                <div class="col-md-7 location-body">
                    {{ page.body }}
                </div>
            </div>
        </div>
    </div>

    <script>
        var map;
        function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            center: {
                lat: {{lat}},
                lng: {{long}}
            },
            zoom: 15,
            scrollwheel: false
        });
        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={{ google_map_api_key }}&callback=initMap" async defer></script>

{% endblock content %}