<div id="relays">
    {% 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>net</th>
              <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>
                  <th>{{ relay.net }}</th>
                  <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>
                    {% else %}
                    <span class="icon">
                      <i class="fa-solid fa-xmark" aria-hidden="true"></i>
                    </span>
                    {% endif %}
                  </td>
                  <td>

                    {{ relay.chans }}
                  </td>
                  <td>
                    {{ relay.nick }}
                  </td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    {% endif %}
  </div>