{% load static %}
{% load index %}


<div id="results">
  <div class="tile is-child box">
    {% if item is not None %}
      <div class="table-container">
        <table class="table is-fullwidth">
          <tbody>
            <tr>
              <th>src</th>
              <td>
                {% if item|index:'src' == 'irc' %}
                  <span class="icon" data-tooltip="IRC">
                    <i class="fa-solid fa-hashtag" aria-hidden="true"></i>
                  </span>
                  IRC
                {% elif item|index:'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|index:'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|index:'online' is False %}
                  <span class="icon has-text-danger has-tooltip-danger" data-tooltip="Offline">
                    <i class="fa-solid fa-circle"></i>
                  </span>
                  {{ item|index:'nick' }}
                {% else %}
                  <span class="icon has-text-warning has-tooltip-warning" data-tooltip="Unknown">
                    <i class="fa-solid fa-circle"></i>
                  </span>
                  {{ item|index:'nick'}}
                {% endif %}
                {% if item|index:'num_chans' is not None %}
                  <span class="tag">
                    {{ item|index:'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>
                  <div id="modals-here"></div>
                {% endif %}
              </td>
            </tr>
            <tr>
              <th>net</th>
              <td>{{ item.net }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    {% endif %}
  </div>
</div>