{% extends 'base.html' %}
{% load script_tags %}
{% block title %}Member Map{% endblock %}
{% block custom_js %}
{% script_tags "jquery" %}
<script type="text/javascript" src="{{ MEDIA_URL }}js/membermap.js"></script>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAql_1Xw9MGW3mOxzo8gLb3hStsp1UIpjYO7Py4hlJXjRzAdyQtBTt5uM4QCgXtTKcuwba8HA9TL9LgQ" type="text/javascript"></script>
{{ form.media }}
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/membermap.css" />
<script type="text/javascript">
//<![CDATA[
var mmapUser = {
   {% if user.is_authenticated %}
   userName : "{{ user.username }}",
   userId : "{{ user.id }}"
   {% else %}
   userName : null,
   userId : null
   {% endif %}
};
//]]>
</script>
{% endblock %}
{% block content %}
<h2>Member Map</h2>
<div id="member_map_main">
    {% if user.is_authenticated %}
    <div id="member_map_top">
        Members on the map: <span id="member_map_count">0</span> &bull; Recent updates:
        <select id="member_map_recent"><option value="0" selected="selected">(select)</option></select>
    </div>
    {% endif %}
    <div>
        {% if user.is_authenticated %}
        <div id="member_map_members_column">
            Members:<br />
            <select id="member_map_members" multiple="multiple">
            </select>
        </div>
        {% endif %}
        <div id="member_map_map">
        </div>
    </div>
    <div id="member_map_info">
        {% if user.is_authenticated %}
        <p id="member_map_directions"></p>
        <p>
        The location you enter below will not be shown to others, but can be determined from the map. 
        For privacy reasons, we don't recommend you enter your exact address. Use a nearby intersection, 
        landmark, or just keep it city and state.
        </p>
        <p>
        Example locations:
        </p>
        <ul>
            <li>3rd and Main, Chicago, IL</li>
            <li>Tucson, Arizona</li>
            <li>Rome, Italy</li>
            <li>5018EA, Tilburg, Netherlands</li>
        </ul>
        <form action="" method="post">
            {{ form.as_p }}
            <p>
            <input type="submit" id="member_map_submit" name="submit" value="Submit" />
            <input type="submit" id="member_map_delete" name="delete" value="Delete" />
            </p>
        </form>
        {% else %}
        <p>
        The member map allows members to place themselves on a google map along with a short message.
        This feature is only for registered users of SurfGuitar101.com. Please
        <a href="{% url accounts-login %}">login</a> or
        <a href="{% url accounts-register %}">register</a> to use the member map.
        </p>
        {% endif %}
    </div>
</div>
{% endblock %}