{% load index %}
{% load static %}
<style>
  #tab-content-{{ unique }} div {
    display: none;
  }

  #tab-content-{{ unique }} div.is-active {
    display: block;
  }
</style>
<div class="tabs is-toggle is-fullwidth is-info" id="tabs-{{ unique }}">
  <ul>
    <li class="is-active" data-tab="1">
      <a>
        <span class="icon is-small"><i class="fa-solid fa-user"></i></span>
        <span>Channels</span>
      </a>
    </li>
    <li data-tab="2">
      <a>
        <span class="icon is-small"><i class="fa-solid fa-hashtag"></i></span>
        <span>Users</span>
      </a>
    </li>
    <li data-tab="3">
      <a>
        <span class="icon is-small"><i class="fa-solid fa-people"></i></span>
        <span>Intersection</span>
      </a>
    </li>
    <li data-tab="4">
      <a>
        <span class="icon is-small"><i class="fa-solid fa-hashtag"></i></span>
        <span>Intersection</span>
      </a>
    </li>
  </ul>
</div>
<div id="tab-content-{{ unique }}">
  <div class="is-active" data-content="1">
    <h4 class="subtitle is-4">Channels for {{ nick }} on {{ net }}</h4>
    {% for channel in chans %}
      <a class="panel-block is-active">
        <span class="panel-icon">
          <i class="fa-solid fa-hashtag" aria-hidden="true"></i>
        </span>
        {{ channel }}
        {% if nick in num_chans %}
          <span class="tag">
            {{ num_users|index:channel }}
          </span>
        {% endif %}
      </a>
    {% endfor %}
  </div>
  <div data-content="2">
    <h4 class="subtitle is-4">Users on {{ channel }} for {{ net }}</h4>
    {% for user in users %}
      <a class="panel-block is-active">
        <span class="panel-icon">
          <i class="fa-solid fa-user" aria-hidden="true"></i>
        </span>
        {{ user }}
        {% if channel in num_users %}
          <span class="tag">
            {{ num_chans|index:user }}
          </span>
        {% endif %}
      </a>
    {% endfor %}
  </div>
  <div data-content="3">
    <h4 class="subtitle is-4">Users sharing channels with {{ nick }} on {{ net }}</h4>
    {% for user in inter_users %}
      <a class="panel-block is-active">
        <span class="panel-icon">
          <i class="fa-solid fa-user" aria-hidden="true"></i>
        </span>
        {{ user }}
        {% if channel in num_users %}
          <span class="tag">
            {{ num_chans|index:user }}
          </span>
        {% endif %}
      </a>
    {% endfor %}
  </div>
  <div data-content="4">
    <h4 class="subtitle is-4">Channels sharing users with {{ channel }} on {{ net }}</h4>
    {% for channel in inter_chans %}
      <a class="panel-block is-active">
        <span class="panel-icon">
          <i class="fa-solid fa-hashtag" aria-hidden="true"></i>
        </span>
        {{ channel }}
        {% if nick in num_chans %}
          <span class="tag">
            {{ num_users|index:channel }}
          </span>
        {% endif %}
      </a>
    {% endfor %}
  </div>
  <script>initTabs("{{ unique }}");</script>
</div>