<div id="{{ plugin_name }}-item-{{ form.item_id }}" class="project-box stack stack-card">
  {#  This is a hidden form that will be submitted by the button below.#}
  <form
    id="{{ plugin_name }}-form-{{ form.item_id }}"
    class="stack-small"
    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="url" name="url" value="{{ form.url.value }}">
    <input type="hidden" data-field="title" name="title" value="{{ form.title.value }}">
    <input id="{{ plugin_name }}-item-badges-{{ form.item_id }}" type="hidden" data-field="badges" name="badges" value="{{ form.badges_as_json }}">
    <input type="hidden" data-field="description" name="description" value="{{ form.description.value }}">
  </form>
  <div>
    <h3 contenteditable="true" data-field="title">{{ form.title.value }}</h3>
    <span contenteditable="true" data-field="url">{{ form.url.value }}</span>
  </div>
  <div>
    {% for error in form.title.errors %}
      <p class="error">{{ error|escape }}</p>
    {% endfor %}
    {% for error in form.url.errors %}
      <p class="error">{{ error|escape }}</p>
    {% endfor %}
  </div>
  <p contenteditable="true" data-field="description">{{ form.description.value }}</p>
  {% for error in form.description.errors %}
    <p class="error">{{ error|escape }}</p>
  {% endfor %}
  {% if form.badges.value %}
    <badge-editor
      input-field-id="{{ plugin_name }}-item-badges-{{ form.item_id }}"
      ul-class="project-badges-list"
      li-class="project-badge"
      span-class="project-badge-name"
    ></badge-editor>
  {% endif %}
  {% for error in form.badges.errors %}
    <p class="error">{{ error|escape }}</p>
  {% endfor %}
  <button id="{{ plugin_name }}-submit-item-{{ form.item_id }}" type="submit">
    <svg class="edit-icon-small">
      <use href="#ok"></use>
    </svg>  
  </button>
  <script>
      // Listen for htmx events to re-initialize when content is swapped
      document.body.addEventListener('htmx:afterSwap', function (evt) {
          console.log("target id: ", evt.detail.target.id, );
          if (
              evt.detail &&
              evt.detail.target &&
              (evt.detail.target.id === "{{ plugin_name }}-item-{{ form.item_id }}" ||
               evt.detail.target.id === "projects-grid")
          ) {
              if (document.getElementById("{{ plugin_name }}-submit-item-{{ form.item_id }}")) {
                  registerClickListenerForHiddenForm(
                      "{{ plugin_name }}-item-{{ form.item_id }}",
                      "{{ plugin_name }}-submit-item-{{ form.item_id }}",
                      "{{ plugin_name }}-form-{{ form.item_id }}",
                      "{{ form.item_id }}"
                  );
              }
          }
      });
  </script>
</div>
