<editable-form id="cover" class="mt-8">
  <!-- Hidden form to capture data -->
  <form
    id="form-cover"
    hx-post="{{ form.post_url }}"
    hx-target="#cover"
    hx-swap="outerHTML"
  >
    <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>

  <!-- Editable Title -->
  <div class="flex items-center justify-between">
    <h2
      class="text-2xl font-bold text-gray-800"
      contenteditable="true"
      data-field="title"
    >
      {{ form.title.value }}
    </h2>
    {% for error in form.title.errors %}
      <p class="text-sm text-red-600">{{ error|escape }}</p>
    {% endfor %}
  </div>

  <!-- Editable Text -->
  <div class="mt-4">
    <div
      class="editable-text text-gray-700 prose"
      contenteditable="true"
      data-field="text"
      data-type="html"
    >
      {{ form.text.value | safe }}
    </div>
    {% for error in form.text.errors %}
      <p class="text-sm text-red-600">{{ error|escape }}</p>
    {% endfor %}
  </div>

  <!-- Save Button -->
  <div class="mt-4 flex justify-end">
    <button
      id="submit-cover"
      type="submit"
      class="inline-flex items-center px-4 py-2 bg-indigo-600 border border-transparent rounded-md font-semibold text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500"
    >
      <!-- Check Icon -->
      <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"
           xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path>
      </svg>
      Save
    </button>
  </div>
</editable-form>