 <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 %}
