{% extends "base.html" %}
{% load static %}
{% block content %}

  <div class="block">
    <form method="POST">
      {% csrf_token %}
      <div class="field is-horizontal">
        <div class="field-label is-normal">
          <label class="label">Search</label>
        </div>
        <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="field is-horizontal">
        <div class="field-label is-normal">
          <label class="label">Timescale</label>
        </div>

        <div class="field-body">
          <div class="field">
            <div class="control is-expanded has-icons-left">
              <div class="select is-fullwidth">
                <select name="timescale">
                  <option value="minute">Minute</option>
                  <option value="hour">Hour</option>
                  <option value="day">Day</option>
                  <option value="week">Week</option>
                  <option value="month">Month</option>
                  <option value="6months">6 months</option>

                </select>
                <span class="icon is-small is-left">
                  <i class="fas fa-magnifying-glass"></i>
                </span>
              </div>
            </div>

          </div>

          <div class="field-label is-normal">
            <label class="label">Fields</label>
          </div>

          <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 class="field-label is-normal">
            <label class="label">Results</label>
          </div>
          
          <div class="field">
            <div class="control is-expanded has-icons-left">
              <div class="select is-fullwidth">
                <select name="results">
                  <option value="5">5</option>
                  <option value="10">10</option>
                  <option value="15">15</option>
                  <option value="20">20</option>
                </select>
                <span class="icon is-small is-left">
                  <i class="fas fa-magnifying-glass"></i>
                </span>
              </div>
            </div>
          </div>

        </div>

      </div>


      <div class="field is-horizontal">
        <div class="field-label">
          <!-- Left empty for spacing -->
        </div>
        <div class="field-body">
          <div class="field">
            <div class="control">

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

            </div>
          </div>
        </div>
      </div>

    </form>
  </div>

  <div class="block">
    <table class="table">
      {% if results is not None %}
        <thead>
          <tr>
            <th>TS</th>
            <th>msg</th>
            <th>host</th>
            <th>nick</th>
            <th>channel</th>
            <th>net</th>
          </tr>
        </thead>
      {% endif %}

      <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>
  {% if results is not None %}
    <p>{{ card }} hits</p>
  {% endif %}
{% endblock %}