{% extends "chimere/base.html" %}
{% load i18n unlocalize_point chimere_tags bootstrap %}
{% block extra_head %}
{% head_jquery %}
{% head_chimere %}
<script src="https://use.fontawesome.com/28dbea13a1.js"></script>
{% comment %}{% head_jme %}{% endcomment %}
{% head_form %}
<script src="{{ STATIC_URL }}saclay/js/jquery.form.js?ver={{SACLAY_VERSION}}" type="text/javascript"></script>
{% if has_search %}
<script src="{{ STATIC_URL }}chimere/js/search.js?ver={{VERSION}}" type="text/javascript"></script>
<script src="{{ STATIC_URL }}chimere/js/search-autocomplete.js?ver={{VERSION}}" type="text/javascript"></script>{% endif %}
{% for js in extra_js %}<script src="{{js}}?ver={{VERSION}}" type="text/javascript"></script>
{% endfor %}

<script type='text/javascript' language='javascript'>
    <!--
    var default_error_message = "{% trans "Error while loading the page... Refresh the page. If the problem persist contact the webmaster." %}";
    var edit_url = "{% url 'editmarker' area_name|add:"/" %}";
    // -->
</script>
<script src="{{ STATIC_URL }}saclay/js/interface.js?ver={{SACLAY_VERSION}}" type="text/javascript"></script>

{% for css in extra_css %}<link rel="stylesheet" type="text/css" href="{{css}}" />
{% endfor %}
{{ block.super }}
<link rel="stylesheet" type="text/css" href="{% url 'dyn-css' area_name|add:'/' %}" />
{% endblock %}
{% block message_edit %}{% endblock %}
{% block sidebar %}
<div id="switch-menu" class="row">
    <div class="col-xs-4"><a href="#">{% trans "Map" %}</a></div>
    <div class="col-xs-4"><a href="#">{% trans "Search result" %}</a></div>
    <div class="col-xs-4 selected"><a href="#">{% trans "Categories" %}</a></div>
</div>
  <div id="sidebar-container">
    <div class='sidebar-handler' id='sidebar-handler-hide'></div>
    <div id='panel'>
        {% display_areas %}
        <div id='map-panel'>
            <div id='search-box'></div>
            <form action='.' method='post' name='frm_categories' id='frm_categories'>
                <div id='categories'>{# dynamic content #}
                </div>
            </form>
            {% routing %}
        </div>
    </div>
    <div id='back-categories'>
        <i class="fa fa-arrow-circle-left" aria-hidden="true"></i> <p>REVENIR AUX CATÉGORIES</p>
    </div>
    <div class='footer' id='footer-panel'>
        {% if contact_email %}<a href='mailto:{{contact_email}}' id='contactus'>{% trans "contact" %}</a> | {% endif %}
        {% comment%}
        <a href="{% url 'chimere:extra_page' '' 'legal' %}" id='page-legal' class='dyn-page'>{% trans "terms of service & credits" %}</a>
        {% endcomment %}
    </div>
  </div>
{% endblock %}
{% block content %}
    {% bootstrap_modal "category_description" "Category description" %}

    <div class='sidebar-handler' id='sidebar-handler-show'>
    </div>
    <div id='detail' class='ui-widget ui-corner-all'></div>
    {% if not itinerary_form %}<div class='map_button'>
        <a href='#' id='button-move-map' class='toggle-button toggle-button-active' onclick='toggleDrawOff();return false;'>
            {% trans "Move on the map" %}
        </a>
        <a href='#' id='button-draw-map' class='toggle-button toggle-button-inactive' onclick='toggleDrawOn();return false;'>
            {% trans "Draw" %}
        </a>
    </div>{% endif %}
    <a href='#' id='permalink'><span class='fa fa-chimere-action fa-bookmark'></span></a>
    {% if simple %}
        {% display_welcome 0 %}
    {%else%}
        {% display_welcome news_visible %}
    {% endif %}
    {% display_news news_visible %}
    {{ block.super }}
    <div id='map-shadow'></div>
    <div id='edit-button' class="action-button" data-toggle="modal"
         data-target="#modal-edit">
        <i class="fa fa-plus" aria-hidden="true"></i>
    </div>

    {% with title="Propose"|translate %}
    {% bootstrap_modal "modal-edit" title "" "xlarge" 1 %}
    {% endwith %}

    {% bootstrap_modal "modal-default-message"%}

<script type="text/javascript">
   <!--
   $("#main-map").show();
   var has_search = {% if has_search %}true{% else %}false{% endif %};
   // array to keep trace of already displayed items
   var search_result = new Array();
   var search_url = "{% url 'chimere:search' area_name %}";
   $(function(){
       $("#modal-edit").on("hide.bs.modal", function() {
         $("#modal-edit .modal-body").html("");
         $("#main-map").chimere('refresh');
       });
       if (has_search){
           load_search_box();
       }
   });
   // -->
</script>
    {% map_menu %}
    {% map 'main-map' %}
    {% bootstrap_modal "modal-chimere-message" %}

{% endblock %}
{% block footer %}
    <p class='map-footer'>{% include "chimere/blocks/footer.html" %}</p>
{% endblock %}