{% load static %}
{% load index %}
<div
  style="display: none;"
  hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
  hx-vals='{"net": "{{ item.net }}", "nick": "{{ item.nick }}"}'
  hx-post="{% url 'chans_insights' %}"
  hx-trigger="load"
  hx-target="#channels"
  hx-swap="outerHTML">
</div>
<div
  style="display: none;"
  hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
  hx-vals='{"net": "{{ item.net }}", "nick": "{{ item.nick }}"}'
  hx-post="{% url 'nicks_insights' %}"
  hx-trigger="load"
  hx-target="#nicks"
  hx-swap="outerHTML">
</div>
<div id="info">
  {% if item is not None %}
    <div class="content" style="max-height: 30em; overflow: auto;">
      <div class="table-container">
        <table class="table is-fullwidth is-hoverable">
          <thead>
            <th>attribute</th>
            <th>value</th>
          </thead>
          <tbody>
            <tr>
              <th>src</th>
              <td>
                {% if item.src == 'irc' %}
                  <span class="icon" data-tooltip="IRC">
                    <i class="fa-solid fa-hashtag" aria-hidden="true"></i>
                  </span>
                  IRC
                {% elif item.src == 'dis' %}
                  <span class="icon" data-tooltip="Discord">
                    <i class="fa-brands fa-discord" aria-hidden="true"></i>
                  </span>
                  Discord
                {% endif %}
              </td>
            </tr>
            <tr>
              <th>nick</th>
              <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>
            </tr>
            <tr>
              <th>host</th>
              <td>{{ item.host }}</td>
            </tr>
            <tr>
              <th>actions</th>
              <td>
                {% if item.src == 'irc' %}
                  <button
                    hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
                    hx-post="{% url 'modal_insights' %}"
                    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>
            </tr>
            <tr>
              <th>net</th>
              <td>{{ item.net }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  {% endif %}
</div>