{% extends 'page.html' %}
{% load bootstrap3 %}

{% block page_content %}
    <h1 style="margin-top: 0;">Contact Us</h1>
    <hr />
    {{ page.content|safe }}
    <hr />
    <h2>Find Us</h2>
    <div class="row">
        <div class="col-md-6">
            <p><strong class="primary">Spire Hospital Leeds</strong></p>
            <div id="googlemap-spire"> </div>
        </div>
        <div class="col-md-6">
            <p><strong class="primary">Nuffield Hospital Leeds</strong></p>
            <div id="googlemap-nuffield"> </div>
        </div>
    </div>
    <hr />
    <h2>Get In Touch</h2>
    {% if submitted %}
        <div class="alert alert-success">Your message has been sent successfully</div>
    {% else %}
        <form id="contact_form" method="POST" action="">
            {% csrf_token %}
            {% bootstrap_form contact_form %}
            {% buttons %}
                <button class="btn btn-green btn-flat">SEND</button>
            {% endbuttons %}
        </form>
    {% endif %}
{% endblock %}

{% block footerjs %}
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?region=gb&key=AIzaSyCj4CCj0BZuV8ScsC2y693En6Sxm1BLZk8"></script>
    <script type="text/javascript">
        // <![CDATA[

        // Function to insert map using Google Maps API (v3)
        function add_map() {
            // Places
            var latlon = new google.maps.LatLng(53.83246,-1.514422);
            var latlon2 = new google.maps.LatLng(53.800519,-1.554416);

            // Options
            var opts = {
                zoom: 12,
                center: latlon,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var opts2 = {
                zoom: 12,
                center: latlon2,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            // New map
            var map = new google.maps.Map(document.getElementById('googlemap-spire'), opts);
            var map2 = new google.maps.Map(document.getElementById('googlemap-nuffield'), opts2);

            // Markers
            var marker = new google.maps.Marker({
                position: latlon,
                title: 'Spire Hospital Leeds'
            });
            var marker2 = new google.maps.Marker({
                position: latlon2,
                title: 'Nuffield Hospital Leeds'
            });
            marker.setMap(map);
            marker2.setMap(map2);
        }

        // Functions to run on load
        $(document).ready( function() {add_map();});

    // ]]>
    </script>
{% endblock %}