<div id="cover-item-{{ item.id }}" aria-label="{{ item.title }}" class="bg-white rounded-xl p-6 shadow-sm border border-slate-200 hover:shadow-md transition-all duration-200 group">
  <div class="flex items-start justify-between mb-4">
    <h3 class="text-xl font-semibold text-slate-800 border-l-4 border-blue-500 pl-4">
      {{ item.title }}
    </h3>
    {% if show_edit_button %}
      <div class="flex items-center space-x-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
        <button
          class="p-2 text-slate-500 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors duration-200"
          hx-get="{{ item.edit_url }}"
          hx-target="#cover-item-{{ item.id }}"
          hx-swap="outerHTML"
          title="Edit section"
        >
          <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5M16 3l5 5L9 20H4v-5L16 3z"></path>
          </svg>
        </button>
        <button
          class="p-2 text-slate-500 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors duration-200"
          hx-delete="{{ item.delete_url }}"
          hx-target="#cover-item-{{ item.id }}"
          hx-swap="delete"
          hx-confirm="Are you sure you want to delete this section?"
          title="Delete section"
        >
          <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
          </svg>
        </button>
      </div>
    {% endif %}
  </div>

  <div class="prose prose-slate max-w-none text-slate-700 leading-relaxed">
    {{ item.text|safe }}
  </div>
</div>