{% 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>

  <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();

    // a widget is ready to be loaded
    document.addEventListener('load-widget', function(event) {
      let container = htmx.find('#drilldown-widget');
      // get the scripts, they won't be run on the new element so we need to eval them
      var scripts = htmx.findAll(container, "script");
      let widgetelement = container.firstElementChild.cloneNode(true);

      // check if there's an existing element like the one we want to swap
      let grid_element = htmx.find('#grid-stack-main');
      let existing_widget = htmx.find(grid_element, '#drilldown-widget-results');

      // get the size and position attributes
      if (existing_widget) {
        let attrs = existing_widget.getAttributeNames();
        for (let i = 0, len = attrs.length; i < len; i++) {
          if (attrs[i].startsWith('gs-')) { // only target gridstack attributes
            widgetelement.setAttribute(attrs[i], existing_widget.getAttribute(attrs[i]));
          }
        }
      }

      // clear the queue element
      container.outerHTML = "";

      // temporary workaround, other widgets can be duplicated, but not results
      if (widgetelement.id == 'drilldown-widget-results') {
        grid.removeWidget("drilldown-widget-{{ unique }}");
      }

      grid.addWidget(widgetelement);
      // re-create the HTMX JS listeners, otherwise HTMX won't work inside the grid
      htmx.process(widgetelement);

      // run the JS scripts inside the added element again
      // for instance, this will fix the dropdown
      for (var i = 0; i < scripts.length; i++) {
        eval(scripts[i].innerHTML);
      }
    });
  </script>

  <div id="modals-here">
  </div>
  <div id="items-here">
  </div>
  <div id="widgets-here" style="display: none;">
  </div>
  <div id="results" style="display: none;">
    {% if table %}
      {% include 'widgets/table_results.html' %}
    {% endif %}
  </div>
  <script>

  </script>

{% endblock %}