{% extends "base.html" %}
{% load static %}
{% load joinsep %}
{% block outer_content %}
  {% if params.modal == 'context' %}
    <div 
      style="display: none;"
      hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
      hx-post="{% url 'modal_context' %}"
      hx-vals='{"net": "{{ params.net|escapejs }}",
               "num": "{{ params.num|escapejs }}",
               "source": "{{ params.source|escapejs }}",
               "channel": "{{ params.channel|escapejs }}",
               "time": "{{ params.time|escapejs }}",
               "date": "{{ params.date|escapejs }}",
               "index": "{{ params.index }}",
               "type": "{{ params.type|escapejs }}",
               "mtype": "{{ params.mtype|escapejs }}",
               "nick": "{{ params.nick|escapejs }}"}'
      hx-target="#modals-here" 
      hx-trigger="load">
    </div>
  {% endif %}
  <script src="{% static 'js/chart.js' %}"></script>
  <script src="{% static 'tabs.js' %}"></script>
  <script>
    function setupTags() {
      var inputTags = document.getElementById('tags');
      new BulmaTagsInput(inputTags);

      inputTags.BulmaTagsInput().on('before.add', function(item) {
        if (item.includes(": ")) {
          var spl = item.split(": ");
        } else {
          var spl = item.split(":");
        }
        var field = spl[0];
        try {
          var value = JSON.parse(spl[1]);
        } catch {
          var value = spl[1];
        }
        return `${field}: ${value}`;
      });
      inputTags.BulmaTagsInput().on('after.remove', function(item) {
        var spl = item.split(": ");
        var field = spl[0];
        var value = spl[1].trim();
      });
    }
    function populateSearch(field, value) {
      var inputTags = document.getElementById('tags');
      inputTags.BulmaTagsInput().add(field+": "+value);
      htmx.trigger("#search", "click");
    }
  </script>

  <div class="grid-stack" id="grid-stack-main">
    <div class="grid-stack-item" gs-w="7" gs-h="10" gs-y="0" gs-x="1">
      <div class="grid-stack-item-content">
        <nav class="panel">
          <p class="panel-heading" style="padding: .2em; line-height: .5em;">
            <i class="fa-solid fa-arrows-up-down-left-right has-text-grey-light"></i>
            Search
          </p>
          <article class="panel-block is-active">
            {% include 'ui/drilldown/search_partial.html' %}
          </article>
        </nav>
      </div>
    </div>
    <div id="results">
      {% if table %}
        <div id="results-content" class="grid-stack-item" gs-w="5" gs-h="15" gs-y="10">
          <div class="grid-stack-item-content">
            <div class="panel">
              <p class="panel-heading" style="padding: .2em; line-height: .5em;">
                <i class="fa-solid fa-arrows-up-down-left-right has-text-grey-light ui-move"></i>
                Results
              </p>
              <div class="panel-block is-active">
                <div class="control">
                  <script src="{% static 'js/column-shifter.js' %}"></script>
                  <span class="icon has-tooltip-bottom" data-tooltip="{{ card }} hits total">
                    <i class="fa-solid fa-chart-mixed"></i>
                  </span>
                
                  {{ table.data|length }} hits in {{ took }}ms
                  {% if exemption is not None %}
                    <span class="icon has-tooltip-bottom" data-tooltip="God mode">
                      <i class="fa-solid fa-book-bible"></i>
                    </span>
                  {% else %}
                    {% if redacted is not None %}
                      <span class="icon has-tooltip-bottom" data-tooltip="{{ redacted }} redacted">
                        <i class="fa-solid fa-mask"></i>
                      </span>
                    {% endif %}
                    {% endif %}
                    {% if delay is not None %}
                      <span class="icon has-tooltip-bottom" data-tooltip="delayed by {{ delay }} days">
                        <i class="fa-solid fa-clock"></i>
                      </span>
                    {% endif %}
                    {% if randomised is True %}
                      <span class="icon has-tooltip-bottom" data-tooltip="integer fields randomised">
                        <i class="fa-solid fa-shuffle"></i>
                      </span>
                    {% endif %}
                  
                    {% include 'ui/drilldown/table_results_partial.html' %}
                    {% include 'ui/drilldown/sentiment_partial.html' %}
                </div>
              </div>
            </div>
          </div>
        </div>
      {% endif %}
    </div>
  </div>
  <div id="modals-here">
  </div>
  <div id="items-here">
  </div>
  <div id="widgets-here" style="display: none;">
  </div>
  <script>
    var grid = GridStack.init({
      cellHeight: 20,
      cellWidth: 50,
      auto: true,
      float: true,
      draggable: {handle: '.panel-heading', scroll: false, appendTo: 'body'},
      removable: false,
    });
    // GridStack.init();
    setupTags();

  </script>
{% endblock %}