{% load static %}

<div id="results">
  {% if results is not None %}
    <div style="display: none" id="jsonData" data-json="{{ data }}">
    </div>
    <div class="box">
      <canvas id="volume"></canvas>
      <script src="{% static 'chart.js' %}"></script>
    </div>
    <div class="box">
      <span class="tag is-success">Online</span>
      <span class="tag is-danger">Offline</span>
      <span class="tag is-warning">Unknown</span>
      IRC: <i class="fa-solid fa-hashtag" aria-hidden="true"></i>
      Discord: <i class="fa-brands fa-discord" aria-hidden="true"></i>
      <div class="table-container">
        <table class="table is-striped is-hoverable is-fullwidth">
          <thead>
            <tr>
              <th>src</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 %}
              <tr>
                <td>
                  {% if item.src == 'irc' %}
                    <i class="fa-solid fa-hashtag" aria-hidden="true"></i>
                  {% elif item.src == 'dis' %}
                    <i class="fa-brands fa-discord" aria-hidden="true"></i>
                  {% endif %}
                </td>
                <td>
                  <p>{{ item.date }}</p>
                  <p>{{ item.time }}</p>
                </td>
                <td>{{ item.msg }}</td>
                <td>{{ item.host }}</td>
                <td>
                  {% if item.online is True %}
                    <span class="tag is-success">{{ item.nick }}</span>
                  {% elif item.online is False %}
                    <span class="tag is-danger">{{ item.nick }}</span>
                  {% else %}
                    <span class="tag is-warning">{{ item.nick }}</span>
                  {% endif %}
                </td>
                <td>
                  {% if item.src == 'irc' %}
                    <button
                      hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
                      hx-post="{% url 'modal_info' %}"
                      hx-vals='{"net": "{{ item.net }}", "nick": "{{ item.nick }}", "channel": "{{ item.channel }}"}'
                      hx-target="#modals-here" 
                      hx-trigger="click"
                      class="btn btn-primary"
                      _="on htmx:afterOnLoad wait 10ms then add .show to #modal then add .show to #modal-backdrop">
                        Information
                    </button>
                    <div id="modals-here"></div>
                  {% endif %}
                </td>
                <td>{{ item.channel }}</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 %}
</div>