  <article class="relative">
    {% 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"
    >
      {% if post.feature_image %}
        <div>
          <img
            src="{{ post.feature_image }}"
            alt=""
            class="w-full aspect-video object-cover"
          >
        </div>
      {% endif %}

      <div class="p-3 text-center">
        <h2 class="text-lg font-bold text-stone-900">
          {{ post.title }}
        </h2>

        {% if post.status == "draft" %}
          <div class="flex justify-center gap-1 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 %}

        {% if post.custom_excerpt %}
          <p class="text-stone-700 text-sm leading-relaxed line-clamp-3 mt-1">
            {{ post.custom_excerpt }}
          </p>
        {% elif post.excerpt %}
          <p class="text-stone-700 text-sm leading-relaxed line-clamp-3 mt-1">
            {{ post.excerpt }}
          </p>
        {% endif %}
      </div>
    </a>

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