{% 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 class="grid-stack-item" gs-w="10" gs-h="40" gs-y="10" gs-x="1">
      <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">
              <div id="results">
                {% include 'ui/drilldown/table_results.html' %}
              </div>
            </div>
          </div>
        </div>
      </div>
    </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 %}