{% extends 'public_frontend/base.html' %}
{% block title %}Blog{% endblock %}
{% block content %}
<div class="grid gap-4">
  {% for p in posts %}
    <a href="{% url 'public_frontend:blog_detail' p.slug %}" class="block p-4 border rounded bg-white hover:bg-gray-50">
      <div class="flex items-start gap-4">
        {% if p.feature_image %}
          <div class="thumb">
            <img src="{{ p.feature_image.url }}" alt="{{ p.title }}" loading="lazy">
          </div>
        {% else %}
          <div class="thumb placeholder">No image</div>
        {% endif %}
        <div class="min-w-0">
          <div class="text-sm text-gray-500">{{ p.published_at|date:'M j, Y' }}</div>
          <div class="font-medium truncate">{{ p.title }}</div>
          <div class="text-sm text-gray-600 line-clamp-2">{{ p.excerpt|default:p.content|striptags|truncatechars:160 }}</div>
        </div>
      </div>
    </a>
  {% empty %}
    <div class="text-gray-500">No posts yet.</div>
  {% endfor %}
  </div>
<div class="mt-4">{% include 'admin_frontend/_pagination.html' %}</div>
<style>
.thumb{ width:96px; height:64px; border-radius:.375rem; overflow:hidden; flex-shrink:0; background:#f3f4f6; display:flex; align-items:center; justify-content:center }
.thumb img{ width:100%; height:100%; object-fit:cover; display:block }
.thumb.placeholder{ color:#9ca3af; font-size:.75rem }
</style>
{% endblock %}
