<div class="p-4 space-y-4 max-w-4xl mx-auto">

  <div class="flex items-center justify-between mb-4">
    <h2 class="text-2xl font-bold text-stone-800">Drafts</h2>
    {% set new_href = url_for('blog.new_post')|host %}
    <a
      href="{{ new_href }}"
      hx-get="{{ new_href }}"
      hx-target="#main-panel"
      hx-select="{{ hx_select_search }}"
      hx-swap="outerHTML"
      hx-push-url="true"
      class="px-3 py-1 rounded bg-stone-700 text-white text-sm hover:bg-stone-800 transition-colors"
    >
      <i class="fa fa-plus mr-1"></i> New Post
    </a>
  </div>

  {% if drafts %}
    <div class="space-y-3">
      {% for draft in drafts %}
        {% set edit_href = url_for('blog.post.admin.edit', slug=draft.slug)|host %}
        <a
          href="{{ edit_href }}"
          hx-boost="false"
          class="block rounded-xl bg-white shadow hover:shadow-md transition overflow-hidden p-4"
        >
          <div class="flex items-start justify-between gap-3">
            <div class="flex-1 min-w-0">
              <h3 class="text-lg font-semibold text-stone-900 truncate">
                {{ draft.title or "Untitled" }}
              </h3>
              {% if draft.excerpt %}
                <p class="text-stone-600 text-sm mt-1 line-clamp-2">
                  {{ draft.excerpt }}
                </p>
              {% endif %}
              {% if draft.updated_at %}
                <p class="text-xs text-stone-400 mt-2">
                  Updated: {{ draft.updated_at.strftime("%-d %b %Y at %H:%M") }}
                </p>
              {% endif %}
            </div>
            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-amber-100 text-amber-800 flex-shrink-0">
              Draft
            </span>
          </div>
        </a>
      {% endfor %}
    </div>
  {% else %}
    <p class="text-stone-500 text-center py-8">No drafts yet.</p>
  {% endif %}

</div>
