<div id="info">
  {% if message is not None %}
    <div class="notification is-{{ class }}" hx-ext="remove-me" remove-me="3s">
      {{ message }}
    </div>
  {% endif %}
  {% if network 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>attribute</th>
            <th>value</th>
          </thead>
          <tbody>
            {% for key, item in network.items %}
              <tr>
                <th>{{ key }}</th>
                <td>
                  {% if key == 'security' %}
                    {% if item == 'none' %}
                      <span class="icon">
                        <i class="fa-solid fa-lock-open" aria-hidden="true"></i>
                      </span>
                    {% elif item == 'ssl' %}
                      <span class="icon">
                        <i class="fa-solid fa-lock" aria-hidden="true"></i>
                      </span>
                    {% endif %}
                  {% elif key == 'relays' %}
                    <span class="icon">
                      <i class="fa-brands fa-unity"></i>
                    </span>
                  {% elif key == 'channels' %}
                    <span class="icon">
                      <i class="fa-solid fa-hashtag"></i>
                    </span>
                  {% elif key == 'records' %}
                    <span class="icon">
                      <i class="fa-solid fa-album"></i>
                    </span>
                  {% elif key == 'host' %}
                    <span class="icon">
                      <i class="fa-solid fa-router"></i>
                    </span>
                  {% endif %}
                  {% if item is not None %}
                    {{ item }}
                  {% endif %}
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
        <div hx-target="#info" hx-swap="outerHTML">
          <button hx-get="{% url 'threshold_irc_network_info_edit' network.net %}" class="button is-primary is-fullwidth">
            <span class="icon" data-tooltip="Edit">
              <i class="fa-solid fa-pencil" aria-hidden="true"></i>
            </span>
          </button>
        </div>
      </div>
    </div>
  {% endif %}
</div>