<editable-form id="{{ plugin_name }}-item-{{ form.item_id }}" class="stack">
  {#  This is a hidden form that will be submitted by the button below.#}
  <form
    id="{{ plugin_name }}-form-{{ form.item_id }}"
    hx-post="{{ form.post_url }}"
    hx-target="#{{ plugin_name }}-item-{{ form.item_id }}"
    hx-swap="outerHTML"
  >
    <input data-field="id" type="hidden" name="id" value="{{ form.item_id }}">
    <input data-field="position" type="hidden" name="position" value="{{ form.position.value }}">
    <input type="hidden" data-field="title" name="title" value="{{ form.title.value }}">
    <input type="hidden" data-field="text" name="text" value="{{ form.text.value }}">
  </form>
  <h3 contenteditable="true" data-field="title">{{ form.title.value }}</h3>
  {% for error in form.title.errors %}
    <p class="error">{{ error|escape }}</p>
  {% endfor %}
  <p class="textarea" contenteditable="true" data-field="text" data-type="html">
    {{ form.text.value|safe }}
  </p>
  {% for error in form.text.errors %}
    <p class="error">{{ error|escape }}</p>
  {% endfor %}
  <div> {# prevent button from taking full width with this div #}
    <button id="{{ plugin_name }}-submit-item-{{ form.item_id }}" type="submit">
      <svg class="edit-icon-small">
        <use href="#ok"></use>
      </svg>
    </button>
  </div>
</editable-form>
