{% extends "base.html" %}
{% load static %}
{% block content %}
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.0.min.js"></script>
  <div class="box">
    <form method="POST">
      {% csrf_token %}
      <div class="field">
        <label class="label">Search</label>
        <div class="field-body">
          <div class="field">
            <div class="control is-expanded has-icons-left">
              <input name="query" class="input" type="text" placeholder="Query">
              <span class="icon is-small is-left">
                <i class="fas fa-magnifying-glass"></i>
              </span>
            </div>
          </div>
        </div>
      </div>

      <div class="columns">
        <div class="column">
          <label class="label">Timescale</label>
          <div class="field-body">
            <div class="field">
              <div class="control is-expanded has-icons-left">
                <div class="select is-fullwidth">
                  <select name="timescale">
                    {% for timescale in timescales %}
                      <option value="{{ timescale }}">{{ timescale }}</option>
                    {% endfor %}
                  </select>
                  <span class="icon is-small is-left">
                    <i class="fas fa-magnifying-glass"></i>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="column">
          <label class="label">Fields</label>

          <div class="field">
            <div class="control is-expanded has-icons-left">
              <div class="select is-fullwidth is-multiple">
                <select multiple name="fields">
                  {% for field in fields %}
                    <option value="{{ field }}">{{ field }}</option>
                  {% endfor %}
                </select>
                <span class="icon is-small is-left">
                  <i class="fas fa-magnifying-glass"></i>
                </span>
              </div>
            </div>
          </div>
        </div>
        <div class="column">
          <label class="label">Results</label>
          <div class="field">
            <div class="control is-expanded has-icons-left">
              <div 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>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="field">
        <div class="control">

          <button class="button is-primary is-fullwidth">
            Search
          </button>

        </div>
      </div>

    </form>
  </div>
  {% if results is not None %}
    <div class="box">
      <div class="table-container">
        <table class="table is-striped is-hoverable is-fullwidth">
          <thead>
            <tr>
              <th>TS</th>
              <th>msg</th>
              <th>host</th>
              <th>nick</th>
              <th>channel</th>
              <th>net</th>
            </tr>
          </thead>

          <tbody>
            {% for item in results %}
              <tr>
                <td>{{ item.ts }}</td>
                <td>{{ item.msg }}</td>
                <td>{{ item.host }}</td>
                <td>{{ item.nick }}</td>
                <td>{{ item.channel }}</td>
                <td>{{ item.net }}</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
    <div class="box">
      <div class="columns">
        <div class="column">
          <p>{{ card }} hits</p>
        </div>
        {% if redacted != 0 %}
          <div class="column">
            <p>{{ redacted }} redacted</p>
          </div>
        {% endif %}

        {% if exemption is not None %}
          <div class="column">
            <p>god mode</p>
          </div>
        {% endif %}
        <div class="column">
          <p>{{ took }}ms</p>
        </div>
      </div>
    </div>

    <div class="columns">
      <div class="column is-half">
        <div class="box">
          <label class="label">Volume</label>
          <canvas id="volumeChart"></canvas>
          
          <script type="text/javascript">
            $.post('{% url "chart_volume_json" %}', { name: "John", time: "2pm" }, function(data) {
                var ctx = $("#volumeChart").get(0).getContext("2d");
                new Chart(ctx, {
                  type: 'line', data: data
                });
            });
          </script>
          
        </div>
      </div>
      <div class="column">
        <div class="box">
          <label class="label">Sentiment</label>
          <canvas id="sentimentChart"></canvas>
          <script type="text/javascript">
            $.post('{% url "chart_sentiment_json" %}', { name: "John", time: "2pm" }, function(data) {
                var ctx = $("#sentimentChart").get(0).getContext("2d");
                new Chart(ctx, {
                  type: 'line', data: data
                });
            });
          </script>
          
        </div>
      </div>
    </div>

  {% endif %}

{% endblock %}