{% extends "base.html" %}
{% block content %}
<h1 class="mm-section-title">Blog</h1>

{% if q %}<div class="text-muted mb-3">Search: “{{ q }}”</div>{% endif %}

<div class="row g-4">
  {% for post in posts %}
  <div class="col-12 col-md-6 col-lg-4">
    <article class="mm-article-card h-100 d-flex flex-column">
      {% if post.thumbnail %}
        <img src="{{ post.thumbnail.url }}" alt="{{ post.title }}" class="mm-article-thumb">
      {% endif %}
      <div class="p-3 d-flex flex-column gap-2">
        <h3 class="h6 m-0"><a class="text-decoration-none text-dark" href="#">{{ post.title }}</a></h3>
        <div class="mm-article-meta">{{ post.published_at|date:"M d, Y" }}</div>
        {% if post.excerpt %}<p class="m-0 text-muted">{{ post.excerpt }}</p>{% endif %}
      </div>
    </article>
  </div>
  {% empty %}
    <p>No posts yet.</p>
  {% endfor %}
</div>
{% endblock %}