% block flash %}{% include "partials/flash.html" %}{% endblock %}
{% block content %}
<div class="content">
  <h1>kv store</h1>
  <p style="font-family: var(--mono); font-size: 12px; color: var(--text-3); margin-bottom: 14px;">
    <a href="/bots/{{ bot_id }}">{{ bot_name }}</a>
  </p>

  <form method="post" action="/bots/{{ bot_id }}/kv/set"
        hx-post="/bots/{{ bot_id }}/kv/set" hx-swap="none">
    <div class="card">
      <h2>set value</h2>
      <div style="display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap;">
        <div class="form-group" style="flex: 1; min-width: 120px;">
          <label for="key">key</label>
          <input class="input" type="text" id="key" name="key" required>
        </div>
        <div class="form-group" style="flex: 2; min-width: 180px;">
          <label for="value">value</label>
          <input class="input" type="text" id="value" name="value" required>
        </div>
        <button type="submit" class="btn-fill" style="margin-bottom: 1px;">
          <span class="htmx-hide-on-request">set</span>
          <span class="htmx-indicator">saving...</span>
        </button>
      </div>
    </div>
  </form>

  <div class="card">
    <h2>stored pairs</h2>
    {% if kvs.is_empty() %}
    <p>no key-value pairs stored</p>
    {% else %}
    {% for kv in kvs %}
    <div class="profile-field" style="justify-content: space-between;">
      <div>
        <span class="profile-label">{{ kv.key }}</span>
        <span>{{ kv.value }}</span>
      </div>
      <form method="post" action="/bots/{{ bot_id }}/kv/{{ kv.key }}/delete"
            hx-post="/bots/{{ bot_id }}/kv/{{ kv.key }}/delete" hx-confirm="delete key {{ kv.key }}?" hx-swap="none"
            style="margin: 0;">
        <button type="submit" class="btn-outline" style="padding: 3px 10px; font-size: 11px; border-color: #AA5555; color: #E08080;">
          delete
        </button>
      </form>
    </div>
    {% endfor %}
    {% endif %}
  </div>
</div>
{% endblock %}