<section id="cover" class="space-y-8">
  {% if cover.avatar_img %}
    <div class="flex justify-center mb-8">
      <div class="relative">
        <img 
          class="w-32 h-32 rounded-full object-cover shadow-lg border-4 border-white ring-2 ring-slate-200" 
          src="{{ cover.avatar_img_url }}" 
          alt="{{ cover.avatar_alt }}"
        >
      </div>
    </div>
  {% endif %}
  
  <div id="cover-items" class="space-y-8">
    {% for item in cover.ordered_entries %}
      {% if show_edit_button %}
        {% include cover.templates.item %}
      {% else %}
        {% if forloop.counter > 1 %}
          {# In non-edit mode the first item is special because it floats around the avatar profile image #}
          <div class="bg-white rounded-xl p-6 shadow-sm border border-slate-200 hover:shadow-md transition-shadow duration-200">
            <h3 class="text-xl font-semibold text-slate-800 mb-4 border-l-4 border-blue-500 pl-4">
              {{ item.title }}
            </h3>
            <div class="prose prose-slate max-w-none text-slate-700 leading-relaxed">
              {{ item.text|safe }}
            </div>
          </div>
        {% endif %}
      {% endif %}
    {% endfor %}
  </div>

  {% if show_edit_button %}
    <div class="flex justify-center pt-6">
      <button
        class="inline-flex items-center px-4 py-2 bg-green-600 hover:bg-green-700 text-white font-medium rounded-lg shadow-md hover:shadow-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2"
        hx-get="{{ cover.add_item_url }}"
        hx-target="#cover-items"
        hx-swap="beforeend"
      >
        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"></path>
        </svg>
        Add Section
      </button>
    </div>
  {% endif %}
</section>