{# Show map of users visiting the site. #}
<html>
    <head>
        <title>{% block title %}Welcome{% endblock %}</title>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <style type="text/css">
            html { height: 100% }
            body { height: 100%; margin: 0; padding: 0 }
            #map-canvas { width: 100%; height: 400px; }
        </style>
{#        <script type="text/javascript" src="{{ MEDIA_URL }}js/jquery-2.0.3.js"></script>#}
        <script src="https://maps.googleapis.com/maps/api/js?key={{ GOOGLE_MAPS_KEY }}&v=3&sensor=true" type="text/javascript"></script>
        <script type="text/javascript">
            var antwerp = new google.maps.LatLng(51.216667, 4.416667)
            function initialize() {
                var mapOptions = {
                    center: antwerp,
                    zoom: 3
                };
                var map = new google.maps.Map(document.getElementById("map-canvas"),
                                              mapOptions);
            }
            google.maps.event.addDomListener(window, 'load', initialize);
        </script>
{#        {% block extra-head %}{% endblock %}#}
    </head>
    <body>
        <h1><a href="/">My Site</a></h1>
        <p id="tracking-active-users">Users</p>
        {% load tracking_tags %}
        <div id="active-users-map"></div>
        <div id="active-users-list"></div>
        <p>
        <div id="map-canvas"/>
        </p>
{##}
{#        {% block content %}{% endblock %}#}
{##}
        {# TODO: check if this works #}
{##}
{##}
{#        {% block footer %}#}
{#            <p>Copyright &copy; {% now "Y" %} Me. All rights reserved.</p>#}
{#        {% endblock %}#}
    </body>
</html>
