{% load i18n %}
<script type='text/javascript'>
var do_you_mean = "{% trans 'Do you mean: ' %}";
var end_do_you_mean = "{% trans '?' %}";
</script>
{% if query %}
{% include "search/search_js.html" %}
<div id='search-listing'>
  <ul>
{% for result in results %}
      {% ifchanged result.properties.category_name %}
      {% if not forloop.first %}
          </ul>
      </li>
      {% endif %}
      <li>
          <img src='{{MEDIA_URL}}{{result.properties.icon_path}}'/>
          <span class="result-category-name">{{result.properties.category_name}}</span>
          <ul>
      {% endifchanged %}
            <li>
                <a href="#"
                   onclick="$('#main-map').chimere('showPopup', '{{result.properties.key}}', null, null, {{result.properties.category_id}});return false;">
                    {{ result.properties.name }}
                </a>
            </li>
          {% if forloop.last %}
          </ul>
      </li>
    {% endif %}
{% empty %}
    <li>{% trans "No results found." %}</li>
{% endfor %}
  </ul>
</div>
{% if previous_page_number or next_page_number %}
    <div id='search-nav'>
    <nav>
      <ul class="pager">
        {% if previous_page_number %}<li class="previous"><a href="#" onclick="haystack_search(this, {{ previous_page_number }});"><i class="fa fa-arrow-circle-left" aria-hidden="true"></i> {% trans "Previous" %}</a></li>{% endif %}
        {% if next_page_number %}<li class="next"><a href="#" onclick="haystack_search(this, {{ next_page_number }});">{% trans "More results..." %} <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></a></li>{% endif %}
      </ul>
    </nav>
    </div>
{% endif %}

{% else %}
<form id='search-form' class='autocomplete-me'>
    <div>
        <input type="text" id="id_q" name="q" autocomplete="off"
               placeholder="{% trans 'Search...' %}"/>
        <input type="hidden" id="id_area" name="area" value="{{area_name}}"/>
        <button name='haystack-search' id='haystack-search' type='button' class="btn btn-default">
            <span class='action-label'>{% trans "Search" %} </span><i class="fa fa-search" aria-hidden="true"></i></button>

    </div>
</form>
<div id='spelling'></div>
<script type='text/javascript'>
no_result_message = "{% trans 'No exact match.' %}";
$(function(){
    $('#haystack-search').click(
        function(evt){
            $("#main-map").chimere("razMap");
            haystack_search(evt);
            search_panel_open();
    });
    {% if autocomplete %}
    window.autocomplete = new Autocomplete({
        form_selector: '.autocomplete-me'
    });
    window.autocomplete.setup();{% endif %}
});
</script>
{% endif %}