{% extends "base.html" %}
{% load static %}
{% block content %}
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></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" 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
                  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-2">
          <div
            _="on click toggle .is-hidden on #options"
            class="button is-light has-text-link is-right">
            Options
          </div>
          <span id="spinner" class="button is-light has-text-link is-loading htmx-indicator">Static</span>
        </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 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 %}