{% load crispy_forms_tags %}
<tr id="constraint-row-{{ initial.key|default:"new" }}">
  <td colspan="3">
    <form method="post" hx-post="{{ form_action }}" hx-target="#constraint-row-{{ initial.key|default:"new" }}" hx-swap="outerHTML">
      {% csrf_token %}
      {% if error %}
        <div class="notification is-danger">{{ error }}</div>
      {% endif %}
      <div class="field">
        <label class="label">Key</label>
        <div class="control">
          <input class="input" name="key" type="text" value="{{ initial.key }}" {% if initial.key %}readonly{% endif %} />
        </div>
      </div>
      <div class="field">
        <label class="label">Type</label>
        <div class="control">
          <div class="select">
            <select name="type">
              <option value="string" {% if initial.type == 'string' %}selected{% endif %}>String</option>
              <option value="int" {% if initial.type == 'int' %}selected{% endif %}>Integer</option>
              <option value="float" {% if initial.type == 'float' %}selected{% endif %}>Float</option>
              <option value="bool" {% if initial.type == 'bool' %}selected{% endif %}>Boolean</option>
              <option value="json" {% if initial.type == 'json' %}selected{% endif %}>JSON (list/object)</option>
            </select>
          </div>
        </div>
      </div>
      <div class="field">
        <label class="label">Value</label>
        <div class="control">
          <textarea name="value" class="textarea" rows="3">{{ initial.value }}</textarea>
        </div>
      </div>
      <div class="field">
        <div class="control">
          <button class="button is-primary" type="submit">Save</button>
          <button class="button" type="button" onclick="this.closest('tr').outerHTML='';">Cancel</button>
        </div>
      </div>
    </form>
  </td>
</tr>