{% load index %}
<div
  style="display: none;"
  hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
  hx-vals='{"net": "{{ net }}", "nicks": "{{ nicks }}"}'
  hx-post="{% url 'meta_insights' %}"
  hx-trigger="load"
  hx-target="#meta"
  hx-swap="outerHTML">
</div>
<div id="nicks">
  <div class="content" style="max-height: 30em; overflow: auto;">
    <table class="table is-fullwidth is-hoverable">
      <tbody>
        {% for nick in nicks %}
          <tr>
            <td>
              {% if nick in online %}
                {% if online|index:nick is True %}
                  <span class="icon has-text-success has-tooltip-success" data-tooltip="Online">
                    <i class="fa-solid fa-circle"></i>
                  </span>
                {% elif online|index:nick 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 %}
              {% endif %}
              <span
                hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
                hx-post="{% url 'modal_drilldown' %}"
                hx-vals='{"net": "{{ net }}", "nick": "{{ nick }}", "channel": "{{ chan }}"}'
                hx-target="#modals-here"
                hx-trigger="click"
                class="button is-small">
                {{ nick }}
              </span>
              <a
                class="icon has-text-info has-tooltip-info"
                data-tooltip="Populate search"
                onclick="document.getElementById('query').value='nick: {{ nick }}';">
                <i class="fa-solid fa-arrow-left-long-to-line"></i>
              </a>
            </td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>