{% load i18n %}
{% block cell-content %}
  {% if cell.title %}
    <{{ cell.title_level }} class="cell--title">{{ cell.title }}</{{ cell.title_level }}>
  {% endif %}

  {% block search-form-pre %}
  {% endblock %}

  {% block search-form %}
    <form id="combo-search-form-{{ cell.pk }}" class="combo-search-form">
      <label class="sr-only" for="combo-search-input-{{ cell.pk }}">{% trans "Search" %}</label>
      <input type="search" name="q" autocomplete="off" id="combo-search-input-{{ cell.pk }}" class="combo-search-input" {% if cell.autofocus %}autofocus {% endif %}{% if cell.input_placeholder %}placeholder="{{ cell.input_placeholder }}" {% endif %}/>
      <button class="submit-button combo-search--button" aria-label="{% trans 'Search' %}">
        <span class="combo-search--button-label">{% block submit-content %}{% trans 'Search' %}{% endblock %}</span>
      </button>
    </form>
  {% endblock %}

  {% block search-results %}
    {% 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|split:":"|first }}"></div>
    {% endfor %}
  {% endblock %}

  {% block search-js %}
    <script>
      $(function() {
        var timeout;
        var last_search = null;
        var $form = $('#combo-search-form-{{ cell.pk }}');
        var $input = $('#combo-search-input-{{ cell.pk }}');
        var extra_context = $form.parents('[data-extra-context]')[0].dataset.extraContext;
        {% 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() {
          var new_search = $input.val();
          if (new_search == last_search) return;
          last_search = new_search;
          $form.addClass('searching');
          var count = {{ cell.search_services|length }};
          {% for search_service in cell.search_services %}
            if (xhr_{{ forloop.counter }}) xhr_{{ forloop.counter }}.abort();
            xhr_{{ forloop.counter }} = $.get(url_{{ forloop.counter }},
              {'q': new_search, 'ctx': decodeURIComponent(extra_context)},
              function (response) {
                xhr_{{ forloop.counter }} = null;
                $results_{{ forloop.counter }}.html(response);
                count--;
                if (count == 0) {
                  $form.removeClass('searching');
                }
              }
            );
          {% endfor %}
        };

        $input.on('paste keyup', function() {
          clearTimeout(timeout);
          timeout = setTimeout(update, 300);
        });
        $input.on('change', function() {
          clearTimeout(timeout);
          update(this);
        });
        $form.on('submit', function() {
          last_search = null;  // make explicit submit search in all cases
          clearTimeout(timeout);
          update();
          return false;
        });

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

{% endblock %}