{% load static %}
{% load index %}
{% load joinsep %}
{% include 'partials/notify.html' %}

{% if table %}
  <script src="{% static 'js/column-shifter.js' %}"></script>
  <div style="display: none" id="jsonData" data-json="{{ data }}">
  </div>

  <div class="has-text-grey-light nowrap-parent">
    <div class="nowrap-child block">
      <i class="fa-solid fa-chart-mixed"></i>
    </div>
    <div class="nowrap-child">
      <p>fetched {{ table.data|length }} of {{ card }} hits in {{ took }}ms</p>
    </div>
    {% if exemption is not None %}
      <div class="nowrap-child">
        <i class="fa-solid fa-book-bible"></i>
      </div>
    {% else %}
      {% if redacted != 0 %}
        <div class="nowrap-child">
          <p>{{ redacted }} redacted</p>
        </div>
      {% endif %}
    {% endif %}
  </div>
  {% if params.index != 'int' and params.index != 'meta' %}
    <div class="box">
      <div style="height: 30rem">
        <canvas id="volume"></canvas>
      </div>
      <script src="{% static 'chart.js' %}"></script>
    </div>
  {% endif %}
  {% include 'ui/drilldown/table_results_partial.html' %}
{% endif %}
{# Update the tags in case the user changed the query #}
{# Check for focus and refocus #}
<script>
  var inputTags = document.getElementsByClassName('tags-input');
  var inputBox = document.querySelector("[placeholder='Add query']");
  var isFocused = (document.activeElement === inputBox);
  for (index = 0; index < inputTags.length; index++) {
    if (index == 0) {
      inputTags[0].outerHTML = '<input id="tags" class="input" type="tags" placeholder="Add query" value="{{ tags|joinsep:',' }}">';
    } else {
      inputTags[index].remove();
    }
  }
  // inputTags[0].outerHTML = '<input id="tags" class="input" type="tags" placeholder="Add query" value="{{ tags|joinsep:',' }}">';
  setupTags();
  var inputBox = document.querySelector("[placeholder='Add query']");
  if (isFocused) {
    inputBox.focus();
  }
</script>