<div id="channels">
  {% if message is not None %}
    <div class="notification is-{{ class }}" hx-ext="remove-me" remove-me="3s">
      {{ message }}
    </div>
  {% endif %}
  {% if channels 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>channel</th>
            <th>actions</th>
          </thead>
          <tbody>
            {% for channel, info in channels.items %}
              <tr>
                <td>
                  {{ channel }}
                  <span class="tag">
                    {{ info }}
                  </span>
                </td>
                <td>
                  <button
                    hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
                    hx-delete="{% url 'threshold_irc_network_channel' net channel %}"
                    hx-target="#channels"
                    hx-swap="outerHTML"
                    class="button is-danger is-small">
                    <span class="icon" data-tooltip="Part">
                      <i class="fa-solid fa-xmark" aria-hidden="true"></i>
                    </span>
                  </button>
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  {% endif %}
</div>