" style="margin-bottom: 12px;">
        <label for="sasl_username">sasl username</label>
        <input class="input" type="text" id="sasl_username" name="sasl_username" value="{{ bot.sasl_username.as_deref().unwrap_or_default() }}">
      </div>
      <div class="form-group" style="margin-bottom: 12px;">
        <label for="sasl_password">sasl password</label>
        <input class="input" type="password" id="sasl_password" name="sasl_password" placeholder="leave blank to keep current">
      </div>
      <div class="form-group" style="margin-bottom: 14px;">
        <label for="channels">channels (comma-separated)</label>
        <input class="input" type="text" id="channels" name="channels" value="{{ channels_str }}">
      </div>
      <button type="submit" class="btn-fill">
        <span class="htmx-hide-on-request">save</span>
        <span class="htmx-indicator">saving...</span>
      </button>
    </div>
  </form>

  <div class="card">
    <h2>scripts</h2>
    {% if scripts.is_empty() %}
    <p>no scripts yet</p>
    {% else %}
    {% for script in scripts %}
    <a href="/bots/{{ bot.id }}/scripts/{{ script.id }}" style="text-decoration: none; color: inherit;">
      <div class="profile-field">
        <span class="profile-label">{{ script.name }}</span>
        <span>{% if script.enabled %}<span style="color: var(--g);">enabled</span>{% else %}<span style="color: var(--text-3);">disabled</span>{% endif %}</span>
      </div>
    </a>
    {% endfor %}
    {% endif %}
    <div style="margin-top: 12px;">
      <a href="/bots/{{ bot.id }}/scripts/create" class="btn-outline">new script</a>
    </div>
  </div>

  <div class="card">
    <h2>tools</h2>
    <div class="card-actions">
      <a href="/bots/{{ bot.id }}/logs" class="btn-outline">logs</a>
      <a href="/bots/{{ bot.id }}/kv" class="btn-outline">kv store</a>
    </div>
  </div>

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