{% load static %}
{% load index %}
{% load joinsep %}
{% include 'partials/notify.html' %}
{% if results %}
  <div style="display: none" id="jsonData" data-json="{{ data }}">
  </div>
  <div class="has-text-grey-light nowrap-parent">
    <div class="nowrap-child block">
      <i class="fa-solid fa-chart-mixed"></i>
    </div>
    <div class="nowrap-child">
      <p>fetched {{ results|length }} of {{ card }} hits in {{ took }}ms</p>
    </div>
    {% if exemption is not None %}
      <div class="nowrap-child">
        <i class="fa-solid fa-book-bible"></i>
      </div>
    {% else %}
      {% if redacted != 0 %}
        <div class="nowrap-child">
          <p>{{ redacted }} redacted</p>
        </div>
      {% endif %}
    {% endif %}
  </div>
  <div class="box">
    <div style="height: 30rem">
      <canvas id="volume"></canvas>
    </div>
    <script src="{% static 'chart.js' %}"></script>
  </div>
  <div class="box">
    <div class="table-container">
      <table class="table is-striped is-hoverable is-fullwidth">
        <thead>
          <tr>
            <th>src</th>
            <th>type</th>
            <th>ts</th>
            <th>msg</th>
            <th>host</th>
            <th>nick</th>
            <th>actions</th>
            <th>channel</th>
            <th>net</th>
          </tr>
        </thead>
        <tbody>
          {% for item in results %}
            {# Workaround for curlylint #}
            <tr class="{% if item.exemption == True %}
                         has-background-grey-lighter
                       {% elif item.type == 'join' %}
                         has-background-success-light
                       {% elif item.type == 'quit' %}
                         has-background-danger-light
                       {% elif item.type == 'kick' %}
                         has-background-danger-light
                       {% elif item.type == 'part' %}
                         has-background-warning-light
                       {% elif item.type == 'mode' %}
                         has-background-info-light
                       {% endif %}">
              <td>
                <a class="has-text-link is-underlined"
                   onclick="populateSearch('src', '{{ item.src|escapejs }}')">
                  {% if item.src == 'irc' %}
                    <span class="icon" data-tooltip="IRC">
                      <i class="fa-solid fa-hashtag" aria-hidden="true"></i>
                    </span>
                  {% elif item.src == 'dis' %}
                    <span class="icon" data-tooltip="Discord">
                      <i class="fa-brands fa-discord" aria-hidden="true"></i>
                    </span>
                  {% endif %}
                </a>
              </td>
              <td>
                <a class="has-text-link is-underlined"
                   onclick="populateSearch('type', '{{ item.type|escapejs }}')">
                  {% if item.type == 'msg' %}
                    <span class="icon" data-tooltip="Message">
                      <i class="fa-solid fa-message"></i>
                    </span>
                  {% elif item.type == 'join' %}
                    <span class="icon" data-tooltip="Join">
                      <i class="fa-solid fa-person-to-portal"></i>
                    </span>
                  {% elif item.type == 'part' %}
                    <span class="icon" data-tooltip="Part">
                      <i class="fa-solid fa-person-from-portal"></i>
                    </span>
                  {% elif item.type == 'quit' %}
                    <span class="icon" data-tooltip="Quit">
                      <i class="fa-solid fa-circle-xmark"></i>
                    </span>
                  {% elif item.type == 'kick' %}
                    <span class="icon" data-tooltip="Kick">
                      <i class="fa-solid fa-user-slash"></i>
                    </span>
                  {% elif item.type == 'nick' %}
                    <span class="icon" data-tooltip="Nick">
                      <i class="fa-solid fa-signature"></i>
                    </span>
                  {% elif item.type == 'mode' %}
                    <span class="icon" data-tooltip="Mode">
                      <i class="fa-solid fa-gear"></i>
                    </span>
                  {% elif item.type == 'action' %}
                    <span class="icon" data-tooltip="Action">
                      <i class="fa-solid fa-exclamation"></i>
                    </span>
                  {% else %}
                    {{ item.type }}
                  {% endif %}
                </a>
              </td>
              <td>
                <p>{{ item.date }}</p>
                <p>{{ item.time }}</p>
              </td>
              <td style="max-width: 10em" class="wrap">{{ item.msg }}</td>
              <td>
                <a class="has-text-link is-underlined"
                   onclick="populateSearch('host', '{{ item.host|escapejs }}')">
                  {{ item.host }}
                </a>
              </td>
              <td>
                <div class="nowrap-parent">
                  <div class="nowrap-child">
                    {% if item.online is True %}
                      <span class="icon has-text-success has-tooltip-success" data-tooltip="Online">
                        <i class="fa-solid fa-circle"></i>
                      </span>
                    {% elif item.online is False %}
                      <span class="icon has-text-danger has-tooltip-danger" data-tooltip="Offline">
                        <i class="fa-solid fa-circle"></i>
                      </span>
                    {% else %}
                      <span class="icon has-text-warning has-tooltip-warning" data-tooltip="Unknown">
                        <i class="fa-solid fa-circle"></i>
                      </span>
                    {% endif %}
                  </div>
                  <a class="nowrap-child has-text-link is-underlined" onclick="populateSearch('nick', '{{ item.nick|escapejs }}')">
                    {{ item.nick }}
                  </a>
                  {% if item.num_chans is not None %}
                    <div class="nowrap-child">
                      <span class="tag">
                        {{ item.num_chans }}
                      </span>
                    </div>
                  {% endif %}
                </div>
              </td>
              <td>
                {% if item.src == 'irc' %}
                  <button
                    hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
                    hx-post="{% url 'modal_drilldown' %}"
                    hx-vals='{"net": "{{ item.net }}", "nick": "{{ item.nick }}", "channel": "{{ item.channel }}"}'
                    hx-target="#modals-here" 
                    hx-trigger="click"
                    class="button is-small">
                    Information
                  </button>
                {% endif %}
              </td>
              <td>
                <div class="nowrap-parent">
                  <a class="nowrap-child has-text-link is-underlined"
                     onclick="populateSearch('channel', '{{ item.channel|escapejs }}')">
                    {{ item.channel }}
                  </a>
                  {% if item.num_users is not None %}
                    <div class="nowrap-child">
                      <span class="tag">
                        {{ item.num_users }}
                      </span>
                    </div>
                  {% endif %}
                </div>
              </td>
              <td>
                <a class="has-text-link is-underlined"
                   onclick="populateSearch('net', '{{ item.net|escapejs }}')">
                  {{ item.net }}
                </a>
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
{% endif %}
{# Update the tags in case the user changed the query #}
{# Check for focus and refocus #}
<script>
  var inputTags = document.getElementsByClassName('tags-input');
  var inputBox = document.querySelector("[placeholder='Add query']");
  var isFocused = (document.activeElement === inputBox);
  for (index = 0; index < inputTags.length; index++) {
    if (index == 0) {
      inputTags[0].outerHTML = '<input id="tags" class="input" type="tags" placeholder="Add query" value="{{ tags|joinsep:',' }}">';
    } else {
      inputTags[index].remove();
    }
  }
  // inputTags[0].outerHTML = '<input id="tags" class="input" type="tags" placeholder="Add query" value="{{ tags|joinsep:',' }}">';
  setupTags();
  var inputBox = document.querySelector("[placeholder='Add query']");
  if (isFocused) {
    inputBox.focus();
  }
</script>