{% import 'macros/stickers.html' as stick %}
  <article class="border-b pb-6 last:border-b-0 relative">
    {# ❤️ like button - OUTSIDE the link, aligned with image top #}
    {% if g.user %}
    <div class="absolute top-20 right-2 z-10 text-6xl md:text-4xl">
      {% set slug = post.slug %}
      {% set liked = post.is_liked or False %}
      {% set like_url = url_for('blog.post.like_toggle', slug=slug)|host %}
      {% set item_type = 'post' %}
      {% include "_types/browse/like/button.html" %}
    </div>
    {% endif %}

    {% set _href=url_for('blog.post.post_detail', slug=post.slug)|host %}
    <a
      href="{{ _href }}"
      hx-get="{{ _href }}"
      hx-target="#main-panel"
      hx-select ="{{hx_select_search}}"
      hx-swap="outerHTML"
      hx-push-url="true"
      aria-selected="{{ 'true' if _active else 'false' }}"
      class="block rounded-xl bg-white shadow hover:shadow-md transition overflow-hidden"
    >
      <header class="mb-2 text-center">
        <h2 class="text-4xl font-bold text-stone-900">
          {{ post.title }}
        </h2>

        {% if post.status == "draft" %}
          <div class="flex justify-center gap-2 mt-1">
            <span class="inline-block px-2 py-0.5 rounded-full text-xs font-semibold bg-amber-100 text-amber-800">Draft</span>
            {% if post.publish_requested %}
              <span class="inline-block px-2 py-0.5 rounded-full text-xs font-semibold bg-blue-100 text-blue-800">Publish requested</span>
            {% endif %}
          </div>
          {% if post.updated_at %}
            <p class="text-sm text-stone-500">
              Updated: {{ post.updated_at.strftime("%-d %b %Y at %H:%M") }}
            </p>
          {% endif %}
        {% elif post.published_at %}
          <p class="text-sm text-stone-500">
            Published: {{ post.published_at.strftime("%-d %b %Y at %H:%M") }}
          </p>
        {% endif %}

      </header>

      {% if post.feature_image %}
        <div class="mb-4">
          <img
            src="{{ post.feature_image }}"
            alt=""
            class="rounded-lg w-full object-cover"
          >
        </div>
      {% endif %}
      {% if post.custom_excerpt %}
        <p class="text-stone-700 text-lg leading-relaxed text-center">
            {{ post.custom_excerpt }}
          </p>
      {% else %}
        {% if post.excerpt %}
          <p class="text-stone-700 text-lg leading-relaxed text-center">
            {{ post.excerpt }}
          </p>
        {% endif %}
      {% endif %}
      </a>

      {# Widget-driven card decorations #}
      {% for w in widgets.container_cards %}
        {% include w.template with context %}
      {% endfor %}

      {% include '_types/blog/_card/at_bar.html' %}

  </article>
