{% load i18n %}
{% block cell-content %}

<form id="combo-search-form-{{ cell.pk }}" class="combo-search-form">
  <input type="search" name="q" autocomplete="off" id="combo-search-input-{{ cell.pk }}" class="combo-search-input" />
  <button class="submit-button">{% trans "Search" %}</button>
</form>

{% for search_service in cell.search_services %}
<div id="combo-search-results-{{ cell.pk }}-{{ forloop.counter }}" class="combo-search-results combo-search-results-{{ search_service.slug }}"></div>
{% endfor %}

<script>
$(function() {
  var timeout;
  var $form = $('#combo-search-form-{{ cell.pk }}');
  var $input = $('#combo-search-input-{{ cell.pk }}');
  {% for search_service in cell.search_services %}
  var $results_{{ forloop.counter }} = $('#combo-search-results-{{ cell.pk }}-{{ forloop.counter }}');
  var xhr_{{ forloop.counter }} = null;
  var url_{{ forloop.counter }} = '{% url 'combo-search-ajax-results' cell_pk=cell.pk service_slug=search_service.slug %}{% if initial_query_string %}?{{ initial_query_string }}{% endif %}';
  {% endfor %}

  function update() {
    {% for search_service in cell.search_services %}
    if (xhr_{{ forloop.counter }}) xhr_{{ forloop.counter }}.abort();
    xhr_{{ forloop.counter }} = $.get(url_{{ forloop.counter }},
      {'q': $input.val()},
      function (response) {
        xhr_{{ forloop.counter }} = null;
        $results_{{ forloop.counter }}.html(response);
      }
    );
    {% endfor %}
  };

  $input.on('paste keyup', function() {
    clearTimeout(timeout);
    timeout = setTimeout(update, 300);
  });
  $input.on('change', function() {
    clearTimeout(timeout);
    update(this);
  });
  $form.on('submit', function() {
    clearTimeout(timeout);
    update();
    return false;
  });

  {% if initial_q %}
  $input.val('{{ initial_q }}');
  update();
  {% endif %}
});
</script>
{% endblock %}