{% extends "base.html" %}
{% load static %}
{% block content %}
  {% include 'mixins/partials/notify.html' %}
  <script src="{% static 'tabs.js' %}"></script>
  <style>
    .icon { border-bottom: 0px !important;}
  </style>
  <div class="tile is-ancestor">
    <div class="tile is-vertical is-9">
      <div class="tile">
        <div class="tile is-parent is-vertical">
          <article class="tile is-child box">
            <form method="POST">
              {% csrf_token %}
              <div class="field has-addons">
                <div class="control is-expanded has-icons-left">
                  <input id="query_full" name="query" class="input" type="text" placeholder="nickname">
                  <span class="icon is-small is-left">
                    <i class="fas fa-magnifying-glass"></i>
                  </span>
                </div>
                <div class="control">
                  <button
                    class="button is-info is-fullwidth"
                    hx-post="{% url 'search_insights' index=index %}"
                    hx-trigger="click"
                    hx-target="#info"
                    hx-swap="outerHTML">
                    Search
                  </button>
                </div>
              </div>
            </form>
          </article>

        </div>
        <div class="tile is-parent">
          <article class="tile is-child box">
            <h5 class="subtitle is-5">Nicks</h5>
            <div id="nicks"></div>
          </article>
        </div>
      </div>
      <div class="tile">
        <div class="tile is-parent is-vertical">
          <article class="tile is-child box">
            <h5 class="subtitle is-5">Info</h5>
            <div id="info"></div>
          </article>

        </div>
        <div class="tile is-parent">
          <article class="tile is-child box">
            <h5 class="subtitle is-5">Meta</h5>
            <div id="meta"></div>
          </article>
        </div>
      </div>
    </div>
    <div class="tile is-parent">
      <article class="tile is-child box">
        <h5 class="subtitle is-5">Channels</h5>
        <div id="channels"></div>
      </article>
    </div>
  </div>
  <div id="modals-here"></div>
{% endblock %}