{% load index %}
<div id="relays">
  {% if message is not None %}
    <div class="notification is-{{ class }}" hx-ext="remove-me" remove-me="3s">
      {{ message }}
    </div>
  {% endif %}
  {% if relays 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>id</th>
            <th>registered</th>
            <th>enabled</th>
            <th>
              <span class="icon">
                <i class="fa-solid fa-hashtag"></i>
              </span>
            </th>
            <th>nick</th>
          </thead>
          <tbody>
            {% for relay in relays %}
              <tr>
                <td>{{ relay.id }}</td>
                <td>
                  {% if relay.registered %}
                    <span class="icon">
                      <i class="fa-solid fa-check" aria-hidden="true"></i>
                    </span>
                  {% else %}
                    <span class="icon">
                      <i class="fa-solid fa-xmark" aria-hidden="true"></i>
                    </span>
                  {% endif %}
                </td>
                <td>
                  {% if relay.enabled %}
                    <span class="icon">
                      <i class="fa-solid fa-check" aria-hidden="true"></i>
                    </span>
                    <button
                      hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
                      hx-get="{% url 'threshold_irc_network_relay_status' relay|index:'net' relay|index:'id' 0 %}"
                      hx-target="#relays"
                      hx-swap="outerHTML"
                      class="button is-danger is-small">
                      <span class="icon" data-tooltip="Disable">
                        <i class="fa-solid fa-wifi-slash" aria-hidden="true"></i>
                      </span>
                    </button>
                  {% else %}
                    <span class="icon">
                      <i class="fa-solid fa-xmark" aria-hidden="true"></i>
                    </span>
                    <button
                      hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
                      hx-get="{% url 'threshold_irc_network_relay_status' relay|index:'net' relay|index:'id' 1 %}"
                      hx-target="#relays"
                      hx-swap="outerHTML"
                      class="button is-success is-small">
                      <span class="icon" data-tooltip="Enable">
                        <i class="fa-solid fa-wifi" aria-hidden="true"></i>
                      </span>
                    </button>
                  {% endif %}
                </td>
                <td>
                  {{ relay.chans }}
                </td>
                <td>
                  {{ relay.nick }}
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  {% endif %}
</div>