{% extends "base.html" %}
{% load static %}
{% block content %}
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script>
    function populateSearch(field, value) {
      var queryElement = document.getElementById('query');
      var present = true;
      if (present == true) {
        var toAppend = ` AND ${field}: "${value}"`;
        var toRemove = `${field}: "${value}"`;
      } else {
        var toAppend = ` AND NOT ${field}: "${value}"`;
        var toRemove = `NOT ${field}: "${value}"`;
      }
      if (!queryElement.value.includes(toAppend) && !queryElement.value.includes(toRemove)) {
        queryElement.value+=toAppend;
      } else {
          queryElement.value = queryElement.value.replaceAll(toAppend, "");
          queryElement.value = queryElement.value.replaceAll(toRemove, "");
      }
      if (field == "src") {
        document.getElementById("source").selectedIndex = 0;
      }
      if (queryElement.value.startsWith(" AND ")) {
        queryElement.value = queryElement.value.replace(" AND ", "");
      }
      htmx.trigger("#search", "click");
    }
  </script>
  <div>
    <form method="POST" hx-post="{% url 'search_drilldown' %}"
    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 class="control is-expanded has-icons-left">
              <input
              hx-post="{% url 'search_drilldown' %}"
              hx-trigger="keyup changed delay:200ms"
              hx-target="#results"
              hx-swap="innerHTML" id="query" name="query" 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 class="control">
              <div class="field">
                <button
                  id="search"
                  class="button is-info is-fullwidth"
                  hx-post="{% url 'search_drilldown' %}"
                  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
              _="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="columns is-hidden">
        <div class="column">
          <div class="field has-addons">
            <div class="control has-icons-left">
              <span class="select">
                <select name="size">
                  {% for size in sizes %}
                    <option value="{{ size }}">{{ size }}</option>
                  {% 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>
        <div class="column">
          <div class="field has-addons">
            <div class="control has-icons-left">
              <span class="select">
                <select id="source" name="source">
                  <option selected value="all">All</option>
                  <option value="irc">IRC</option>
                  <option value="dis">Discord</option>
                </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>
        <div class="column">
          <div id="sentiment">
            <div class="field has-addons">
              <div class="control">
                <input disabled="undefined" name="sentiment" id="sliderWithValue" class="slider has-output-tooltip is-fullwidth" min="-1" max="1" value="0" step="0.05" type="range">
                <output for="sliderWithValue" class="slider-output">0</output>
                <script>bulmaSlider.attach();</script>
              </div>
              <p class="control">
                <a class="button is-static">
                  sentiment
                </a>
              </p>
            </div>
            <div class="control">
              <label class="radio">
                <input type="radio" value="below" name="sentiment-method">
                Below
              </label>
              <label class="radio">
                <input type="radio" value="exact" name="sentiment-method">
                Exact
              </label>
              <label class="radio">
                <input type="radio" value="above" name="sentiment-method">
                Above
              </label>
              <label class="radio">
                <input type="radio" value="nonzero" name="sentiment-method">
                Nonzero
              </label>
            </div>
          </div>

          <label class="checkbox">
            <input type="checkbox" name="check-sentiment"
              _="on click toggle @disabled on #sliderWithValue then toggle @disabled on #sentiment">
              Check sentiment
          </label>
        </div>
      </div>
      <div class="is-hidden"></div>
    </form>
  </div>
  <div class="block">
    <div id="results">
    </div>
  </div>
  <div id="modals-here">
  </div>
{% endblock %}