{% load index %}

<div id="channels">
  <div class="content" style="max-height: 30em; overflow: auto;">
    <table class="table is-fullwidth is-hoverable">
      <tbody>
        {% for chan in chans %}
          <tr>
            <td>
              <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">
                {{ chan }}
              </span>
              {% if chan in num_users %}
                <span class="tag">
                  {{ num_users|index:chan }}
                </span>
              {% endif %}
            </td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>