{% load static %}
{% load index %}
{% include 'partials/notify.html' %}
{% if results is not None %}
  <div style="display: none" id="jsonData" data-json="{{ data }}">
  </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 %}
            {% if item.exemption == True %}
              <tr class="has-background-grey-lighter">
            {% elif item.type == 'join' %}
              <tr class="has-background-success-light">
            {% elif item.type == 'quit' %}
              <tr class="has-background-danger-light">
            {% elif item.type == 'kick' %}
              <tr class="has-background-danger-light">
            {% elif item.type == 'part' %}
              <tr class="has-background-warning-light">
            {% elif item.type == 'mode' %}
              <tr class="has-background-info-light">
            {% else %}
              <tr>
            {% endif %}
              <td>
                {% 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 %}
              </td>
              <td>
                {% 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>
                {% else %}
                  {{ item.type }}
                {% endif %}
              </td>
              <td>
                <p>{{ item.date }}</p>
                <p>{{ item.time }}</p>
              </td>
              <td style="max-width: 10em" class="wrap">{{ item.msg }}</td>
              <td>{{ item.host }}</td>
              <td>
                {% 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>
                  {{ item.nick }}
                {% 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>
                  {{ item.nick }}
                {% else %}
                  <span class="icon has-text-warning has-tooltip-warning" data-tooltip="Unknown">
                    <i class="fa-solid fa-circle"></i>
                  </span>
                  {{ item.nick }}
                {% endif %}
                {% if item.num_chans is not None %}
                  <span class="tag">
                    {{ item.num_chans }}
                  </span>
                {% endif %}
              </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>
                {{ item.channel }}
                {% if item.num_users is not None %}
                  <span class="tag">
                    {{ item.num_users }}
                  </span>
                {% endif %}
              </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>
{% endif %}