{% extends "base.html" %}
{% load static %}
{% block content %}
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <div class="box">
    <form method="POST">
      {% csrf_token %}

      <div class="columns">
        <div class="column">
          <div class="field has-addons">
            <div class="control is-expanded has-icons-left">
              <input 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-primary 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">
          <div class="field has-addons">
            <div class="control is-expanded has-icons-left">
              <span class="select is-fullwidth">
                <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>

    </form>
  </div>
  
  <div id="results">
  </div>
  <div id="modals-here">
  </div>
{% endblock %}