{% load index %}

<script>
  var modal = document.querySelector('.modal');  // assuming you have only 1
  var html = document.querySelector('html');
  modal.querySelector('.modal-background').addEventListener('click', function(e) {
    e.preventDefault();
    modal.classList.remove('is-active');
    html.classList.remove('is-clipped');
  });
  modal.querySelector('.modal-close').addEventListener('click', function(e) {
    e.preventDefault();
    modal.classList.remove('is-active');
    html.classList.remove('is-clipped');
  });

  var TABS = [...document.querySelectorAll('#tabs li')];
  var CONTENT = [...document.querySelectorAll('#tab-content div')];
  var ACTIVE_CLASS = 'is-active';
  initTabs();
</script>
<style>
  #tab-content div {
    display: none;
  }

  #tab-content div.is-active {
    display: block;
  }
</style>
<div class="modal is-active is-clipped">
  <div class="modal-background"></div>
  <div class="modal-content">
    <div class="box">
      <div class="tabs is-toggle is-fullwidth is-primary" id="tabs">
        <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">
        <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>
      </div>
    </div>
    <button class="modal-close is-large" aria-label="close"></button>
  </div>
</div>