{% extends "base.html" %}
{% load static %}
{% load joinsep %}
{% block 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 }}",
               "src": "{{ params.src|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>
    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>
    {% include 'partials/notify.html' %}
    <form class="skipEmptyFields" method="POST" hx-post="{% url 'search' %}"
          hx-trigger="change"
          hx-target="#results"
          hx-swap="innerHTML"
          hx-indicator="#spinner">
      {% csrf_token %}

      <div class="columns">
        <div class="column">
          <div class="field has-addons">
            <div id="query" class="control is-expanded has-icons-left">
              <input
                hx-post="{% url 'search' %}"
                hx-trigger="keyup changed delay:200ms"
                hx-target="#results"
                hx-swap="innerHTML"
                name="query"
                value="{{ params.query }}"
                class="input"
                type="text"
                placeholder="(science | tech | art) + (interest) -hello">
              <span class="icon is-small is-left">
                <i class="fas fa-magnifying-glass"></i>
              </span>
            </div>
            <div class="control">
              <div class="field">
                <button
                  id="search"
                  class="button is-info is-fullwidth"
                  hx-post="{% url 'search' %}"
                  hx-trigger="click"
                  hx-target="#results"
                  hx-swap="innerHTML">
                  Search
                </button>
              </div>
            </div>
          </div>
        </div>
        <div class="column is-3">
          <div class="nowrap-parent">
            <div
              data-script="on click toggle .is-hidden on #options"
              class="button is-light has-text-link is-right nowrap-child">
              Options
            </div>
            <div class="nowrap-child">
              <span id="spinner" class="button is-light has-text-link is-loading htmx-indicator">Static</span>
            </div>
          </div>
        </div>
      </div>
      <div id="options" class="box is-hidden">
        <div class="columns is-multiline">
          <div class="column is-narrow">
            <div class="field has-addons">
              <div class="control has-icons-left">
                <span class="select">
                  <select name="size">
                    {% for size in sizes %}
                      {% if size == params.size %}
                        <option selected value="{{ size }}">{{ size }}</option>
                      {% else %}
                        <option value="{{ size }}">{{ size }}</option>
                      {% endif %}
                    {% endfor %}
                  </select>
                  <span class="icon is-small is-left">
                    <i class="fas fa-magnifying-glass"></i>
                  </span>
                </span>
              </div>
              <p class="control">
                <a class="button is-static">
                  results
                </a>
              </p>
            </div>
            <div class="control">
              <div class="field">
                <input
                  id="full_query"
                  type="checkbox"
                  class="switch"
                  {% if params.query_full is not None %}checked="checked"{% else %}none{% endif %}
                  data-script="on click toggle .is-hidden on #query_full">
                <label
                  class="{% if not perms.core.query_search %}is-disabled{% endif %}"
                  for="full_query">Full query </label>
              </div>
            </div>
          </div>
          <div class="column is-narrow">
            <div class="field has-addons block">
              <div class="control has-icons-left">
                <span class="select">
                  <select id="source" name="source">
                    {% if params.source == 'irc' %}
                      <option selected value="irc">IRC</option>
                    {% else %}
                      <option value="irc">IRC</option>
                    {% endif %}

                    {% if params.source == 'dis' %}
                      <option selected value="dis">Discord</option>
                    {% else %}
                      <option value="dis">Discord</option>
                    {% endif %}

                    {% if params.source == None %}
                      <option selected value="all">All</option>
                    {% elif params.source == 'all' %}
                      <option selected value="all">All</option>
                    {% else %}
                      <option value="all">All</option>
                    {% endif %}
                    
                  </select>
                  <span class="icon is-small is-left">
                    <i class="fas fa-magnifying-glass"></i>
                  </span>
                </span>
              </div>
              <p class="control">
                <a class="button is-static">
                  source
                </a>
              </p>
            </div>
            <div class="control">
              <label class="button has-text-link">
                <input type="checkbox"
                       name="dedup"
                       {% if params.dedup == "on" %}
                         checked
                       {% endif %}>
                <span class="icon" data-tooltip="Deduplicate results">
                  <i class="fa-solid fa-copy"></i>
                </span>
              </label>
            </div>
          </div>
          <div class="column is-narrow">
            <div id="sentiment block">
              <div class="field has-addons">
                <div class="control">
                  <input
                    {% if params.check_sentiment != "on" %}
                      disabled="undefined"
                    {% endif %}
                    name="sentiment" id="sliderWithValue" class="slider has-output-tooltip is-fullwidth" min="-1" max="1"
                    {% if params.sentiment == None %}
                      value="0"
                    {% else %}
                      value="{{ params.sentiment }}"
                    {% endif %}
                    step="0.05" type="range">
                  <output for="sliderWithValue" class="slider-output">
                    {% if params.sentiment == None %}
                      0
                    {% else %}
                      {{ params.sentiment }}
                    {% endif %}
                  </output>
                  <script>bulmaSlider.attach();</script>
                </div>
                <p class="control">
                  <a class="button is-static">
                    sentiment
                  </a>
                </p>
              </div>
              <div class="control">
                <label class="radio button has-text-link">
                  
                  <input type="radio"
                         value="below"
                         {% if params.sentiment_method == 'below' %}
                           checked
                         {% endif %}
                         name="sentiment_method">
                  <span class="icon" data-tooltip="Below">
                    <i class="fa-solid fa-face-frown"></i>
                  </span>
                </label>
                <label class="radio button has-text-link is-hidden">

                  <input type="radio"
                         value="exact"
                         {% if params.sentiment_method == 'exact' %}
                           checked
                         {% endif %}
                         name="sentiment_method">
                  <span class="icon" data-tooltip="Exact">
                    <i class="fa-solid fa-face-smile"></i>
                  </span>
                </label>
                <label class="radio button has-text-link">
                  <input type="radio"
                         value="above"
                         {% if params.sentiment_method == 'above' %}
                           checked
                         {% endif %}
                         name="sentiment_method">
                  <span class="icon" data-tooltip="Above">
                    <i class="fa-solid fa-face-smile"></i>
                  </span>
                </label>
                <label class="radio button has-text-link">
                  <input type="radio"
                         value="nonzero"
                         {% if params.sentiment_method == 'nonzero' %}
                           checked
                         {% endif %}
                         name="sentiment_method">
                  <span class="icon" data-tooltip="Nonzero">
                    <i class="fa-solid fa-face-meh-blank"></i>
                  </span>
                </label>
              </div>
            </div>
            <label class="checkbox button mt-5">
              <input type="checkbox"
                     name="check_sentiment"
                     {% if params.check_sentiment == "on" %}
                       checked
                     {% endif %}
                     data-script="on click toggle @disabled on #sliderWithValue then toggle @disabled on #sentiment">
                     Check sentiment
            </label>
          </div>
          <div class="column is-narrow">
            <div id="date">
              <div class="field">
                <div class="control">
                  <input type="date" name="dates" value="{{ params.date }}">
                  <script>
                    var options = {
                      "type": "datetime",
                      "isRange": true,
                      "color": "info",
                      "validateLabel": "Save",
                      "dateFormat": "yyyy-MM-dd",
                      "startDate": "{{ params.from_date|escapejs }}",
                      "startTime": "{{ params.from_time|escapejs }}",
                      "endDate": "{{ params.to_date|escapejs }}",
                      "endTime": "{{ params.to_time|escapejs }}",
                      "displayMode": "dialog"
                    };
                    // Initialize all input of type date
                    var calendars = bulmaCalendar.attach('[type="date"]', options);

                    // Loop on each calendar initialized
                    for(var i = 0; i < calendars.length; i++) {
                      // Add listener to select event
                      calendars[i].on('save', date => {
                        htmx.trigger("#search", "click");
                      });
                    }
                  </script>
                </div>
              </div>
              <div class="control">
                <label class="radio button has-text-link">
                  <input type="radio" value="desc" name="sorting"
                         {% if params.sorting == None %}
                           checked
                         {% elif params.sorting == 'desc' %}
                           checked
                         {% endif %}
                  >
                  <span class="icon" data-tooltip="Sort descending">
                    <i class="fa-solid fa-sort-down"></i>
                  </span>
                </label>
                <label class="radio button">
                  <input type="radio" value="asc" name="sorting"
                         {% if params.sorting == 'asc' %}
                           checked
                         {% endif %}>
                  <span class="icon" data-tooltip="Sort ascending">
                    <i class="fa-solid fa-sort-up"></i>
                  </span>
                </label>
                <label class="radio button">
                  <input type="radio" value="none" name="sorting"
                         {% if params.sorting == 'none' %}
                           checked
                         {% endif %}>
                  <span class="icon" data-tooltip="No sort">
                    <i class="fa-solid fa-sort"></i>
                  </span>
                </label>
              </div>
            </div>
          </div>
          <div class="column is-narrow">
            <div class="field has-addons">
              <div class="control has-icons-left">
                <span class="select is-warning">
                  <select {% if not user.is_superuser %}disabled{% endif %} id="index" name="index">
                    {% if params.index == 'main' %}
                      <option selected value="main">Main</option>
                    {% elif params.index == None %}
                      <option selected value="main">Main</option>
                    {% else %}
                      <option value="main">Main</option>
                    {% endif %}

                    {% if params.index == 'int' %}
                      <option selected value="int">Internal</option>
                    {% else %}
                      <option value="int">Internal</option>
                    {% endif %}

                    {% if params.index == 'meta' %}
                      <option selected value="meta">Meta</option>
                    {% else %}
                      <option value="meta">Meta</option>
                    {% endif %}
                    
                  </select>
                  <span class="icon is-small is-left">
                    <i class="fas fa-magnifying-glass"></i>
                  </span>
                </span>
              </div>
              <p class="control">
                <a class="button is-static">
                  index
                </a>
              </p>
            </div>
          </div>
        </div>
      </div>
      <div id="query_full" class="block {% if params.query_full is None %}is-hidden{% endif %}">
        <div class="control is-expanded has-icons-left">
          <input
            hx-post="{% url 'search' %}"
            hx-trigger="keyup changed delay:200ms"
            hx-target="#results"
            hx-swap="innerHTML"
            name="query_full"
            value="{{ params.query_full }}"
            class="input"
            type="text"
            placeholder="msg: science AND nick: BillNye AND channel: #science">
          <span class="icon is-small is-left">
            <i class="fas fa-magnifying-glass"></i>
          </span>
        </div>
      </div>
      <div class="block">
        <input
          hx-trigger="change"
          hx-post="{% url 'search' %}"
          hx-target="#results"
          hx-swap="innerHTML"
          id="tags"
          class="input"
          type="tags"
          name="tags"
          placeholder="Add tags"
          value="{{ params.tags }}">
      </div>
      <div class="is-hidden"></div>
    </form>
  </div>
  <div class="block">
    <div id="results">
      {% include 'ui/drilldown/table_results.html' %}
      <script>
        setupTags();
      </script>
    </div>
  </div>
  <div id="modals-here">
  </div>
{% endblock %}