{% extends "base.html" %}
{% load static %}
{% block content %}
  <div class="block">
    <form method="POST">
      <div class="field-body">
        <div class="field">
          <p class="control is-expanded has-icons-left">
            {% csrf_token %}
            <input name="query" class="input" type="text" placeholder="Query">
            <span class="icon is-small is-left">
              <i class="fas fa-user"></i>
            </span>
          </p>
        </div>
        
        <div class="field is-horizontal">
          <div class="field-body">
            <div class="field is-narrow">
              <div class="control">
                <div class="select is-fullwidth">
                  <select name="fields">
                    {% for field in fields %}
                      <option>{{ field }}</option>
                    {% endfor %}
                  </select>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="field-body">
          <div class="field is-narrow">
            <div class="control">
              <div class="select is-fullwidth">
                <select>
                  <option>day</option>
                  <option>week</option>
                  <option>month</option>
                  <option>year</option>
                </select>
              </div>
            </div>
          </div>
        </div>
      </div>
    <div class="field is-horizontal">

      <div class="field-body">
    <div class="field is-horizontal">
      <div class="field-label">
        <label class="label">Search all fields</label>
      </div>
      <div class="field-body">
        <div class="field is-narrow">
          <div class="control">
            <label class="radio">
              <input type="radio" name="member">
              Yes
            </label>
            <label class="radio">
              <input type="radio" name="member">
              No
            </label>
          </div>
        </div>
      </div>
    </div>
    <div class="field is-horizontal">
      <div class="field-label is-normal">
        <label class="label">Results</label>
      </div>
      <div class="field-body">
        <div class="field is-narrow">
          <div class="control">
            <div class="select is-fullwidth">
              <select name="results">
                <option>5</option>
                <option>10</option>
                <option>25</option>
              </select>
            </div>
          </div>
        </div>
      </div>
    </div>
    </div>
</div>

<div class="field-body">
    <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">
              Send message
            </button>
          </div>
        </div>
      </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>
  <p>{{ card }} hits</p>
{% endblock %}