{% extends "base_user.html" %}
{% load i18n %}
{% block message_edit %}{% endblock %}
{% block sidebar %}{{ block.super }}
<div id='panel'>
<form method='post' name='frm_categories' id='frm_categories'>
<ul id='categories'>{% for category, lst_sub_categories in sub_categories %}
<script language='javascript'><!--
var lst_{{category.id}}=new Array();
{% for sub_category in lst_sub_categories %}
lst_{{category.id}}.push("{{sub_category.id}}");{% endfor %}
--></script>
  <li>{% if category.selected %}<script language='javascript'>var current_cat={{category.id}};{% endif %}</script><img class='control_image' id='maincategory_img_{{category.id}}' alt='control' src='{{media_path}}icons/{% if category.selected %}minus.png{%else%}plus.png{%endif%}' onclick='toggleCategory({{category.id}});'/>
{% trans category.name %}
<img class='zoom_image' alt='{% trans "Zoom to" %} {{category.name}}' src='{{media_path}}icons/zoom.png' onclick='zoomToCategory(lst_{{category.id}}.join("_"))'/>
    <ul class='subcategories' id='maincategory_{{category.id}}'{% if not category.selected %} style='display:None'{% endif %}>{% for sub_category in lst_sub_categories %}
      <li><input type='checkbox' onclick='loadGeoObjects()' name='category_{{sub_category.id}}' id='category_{{sub_category.id}}'{% if sub_category.selected %} checked='checked'{% endif %}/> <label for='{{sub_category.id}}'>
      <img alt='{{sub_category.name}}' src='{{media_path}}{{sub_category.icon.image}}'/>
      {% trans sub_category.name %}</label>
      <img class='zoom_image' alt='{% trans "Zoom to" %} {{sub_category.name}}' src='{{media_path}}icons/zoom.png' onclick='zoomToCategory({{sub_category.id}})'/></li>{% endfor %}
      {%if category.description%}<li><a href='#' onclick='displayCategoryDetail({{category.id}});'>{%trans "Tell me more..."%}</a></li>{%endif%}
    </ul>
  </li>{% endfor %}
  <li id='display_submited'><input type='checkbox'  onclick='loadGeoObjects()' name='display_submited' id='display_submited_check'/> {% trans "Display markers and routes waiting for validation"%}</li>
</ul>

</form>
</div>
{%if areas%}<div id='areas'>
<ul>{% for area in areas%}
<li><img class='zoom_image' alt='{% trans "Zoom to" %} {{area.name}}' src='{{media_path}}icons/zoom.png' onclick='zoomToArea({{area.upper_left_corner.x}}, {{area.upper_left_corner.y}}, {{area.lower_right_corner.x}}, {{area.lower_right_corner.y}})'/> {{area.name}}</li>{%endfor%}
</ul>
</div>{%endif%}

<div id='detail'>
</div>
<div id='category_detail'>
</div>

{{welcome}}{% endblock %}
{% block content %}{{ block.super }}<div id='map'></div>
<script type='text/javascript'><!--
var map_layer = {{map_layer|safe}};
var permalink_label = '{%trans "Permalink"%}';
var extra_url = "{{extra_url}}";
var p_zoom;
{%if p_zoom %}p_zoom={{p_zoom}};
var p_lat={{p_lat}};
var p_lon={{p_lon}};
var p_display_submited={{p_display_submited}};
var p_checked_categories = [{{p_checked_categories}}];{%endif%}
init();
// --> </script>{% endblock %}
{% block footer %}<div id='map-footer'><a href='javascript:show("welcome");'>{% trans "Welcome message"%}</a> - {{ block.super }} - {% trans "Map"%} © <a href='http://openstreetmap.org/'>OpenStreetMap</a></div>
{% endblock %}