{% load static %}
<section id="cover-flat" class="bg-gradient-to-br from-slate-50 to-blue-50 rounded-2xl p-8 shadow-lg border border-slate-200">
  <header class="mb-8">
    {% if show_edit_button %}
      <div class="flex items-start justify-between group">
        <h1 class="text-4xl lg:text-5xl font-bold bg-gradient-to-r from-slate-800 to-slate-600 bg-clip-text text-transparent leading-tight">
          {{ cover.title }}
        </h1>
        <button
          class="opacity-0 group-hover:opacity-100 transition-opacity duration-200 p-2 rounded-lg hover:bg-white/50 text-slate-600 hover:text-slate-800"
          hx-get="{{ cover.edit_flat_url }}"
          hx-target="#cover-flat"
          hx-swap="outerHTML"
        >
          <svg class="w-5 h-5" 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>
      </div>
    {% else %}
      <h1 class="text-4xl lg:text-5xl font-bold bg-gradient-to-r from-slate-800 to-slate-600 bg-clip-text text-transparent leading-tight">
        {{ cover.title }}
      </h1>
    {% endif %}
  </header>

  {% if cover.avatar_img %}
    <div class="float-right ml-8 mb-6">
      <div class="relative group">
        <img
          class="w-32 h-32 lg:w-40 lg:h-40 rounded-2xl object-cover shadow-xl border-4 border-white ring-2 ring-slate-200"
          {% if cover.avatar_img_width %}
            width="{{ cover.avatar_img_width }}"
            height="{{ cover.avatar_img_height }}"
          {% endif %}
          src="{{ cover.avatar_img_url }}"
          alt="{{ cover.avatar_alt }}"
        >
        <div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      </div>
    </div>
  {% endif %}

  {% if not show_edit_button and cover.first_item %}
    <div class="prose prose-lg prose-slate max-w-none">
      <h2 class="text-2xl font-semibold text-slate-800 mb-4 border-l-4 border-blue-500 pl-4">
        {{ cover.first_item.title }}
      </h2>
      <div class="text-slate-700 leading-relaxed">
        {{ cover.first_item.text|safe }}
      </div>
    </div>
  {% endif %}
</section>