h2>
    <div class="profile-field">
      <span class="profile-label">host</span>
      <span>{{ hostname }}</span>
    </div>
    <div class="profile-field">
      <span class="profile-label">port (tls)</span>
      <span>6697</span>
    </div>
    <div class="profile-field">
      <span class="profile-label">port (plain)</span>
      <span>6667</span>
    </div>
    {% if !username.is_empty() %}
    <div class="profile-field">
      <span class="profile-label">username</span>
      <span>{{ username }}</span>
    </div>
    {% endif %}
  </div>

  {% if !networks.is_empty() %}
  <div class="card">
    <h2>networks</h2>
    {% for net in networks %}
    <div class="profile-field">
      <span class="profile-label">{% if net.name.is_empty() %}{{ net.addr }}{% else %}{{ net.name }}{% endif %}</span>
      <span>{% if !net.nick.is_empty() %}{{ net.nick }} @ {% endif %}{{ net.addr }}{% if !net.enabled %} (disabled){% endif %}</span>
    </div>
    {% endfor %}
  </div>
  {% endif %}

  <div class="card">
    <h2>danger zone</h2>
    <p>deleting a bouncer removes all its data, networks, and message history.</p>
    <form method="post" action="/bouncers/{{ name }}/delete"
          hx-post="/bouncers/{{ name }}/delete" hx-confirm="delete bouncer {{ name }}? this cannot be undone.">
      <button type="submit" class="btn-fill" style="background: #AA5555;">
        <span class="htmx-hide-on-request">delete bouncer</span>
        <span class="htmx-indicator">deleting...</span>
      </button>
    </form>
  </div>
</div>
{% endblock %}
