{% extends "website/base.html" %}
{% block content %}
<div class="card">
  <h1 style="margin:0 0 6px">Blog / Resources</h1>
  <p style="margin:0;color:var(--muted)">Home care tips, elderly health education, mental wellness, and family support.</p>
</div>

<div class="grid grid-3" style="margin-top:14px">
  {% for p in posts %}
    <a class="card" style="text-decoration:none" href="{% url 'website:blog_detail' p.slug %}">
      <h3 style="margin:0 0 6px">{{ p.title }}</h3>
      <div class="help">{% if p.published_at %}{{ p.published_at|date:"M d, Y" }}{% endif %}</div>
      <p style="margin:10px 0 0;color:var(--muted)">{{ p.excerpt|default:p.body|truncatechars:140 }}</p>
      <div class="help" style="margin-top:10px"><b>Read more →</b></div>
    </a>
  {% empty %}
    <div class="card">No posts yet. Add posts in <b>Admin → Blog Posts</b>.</div>
  {% endfor %}
</div>

{% if is_paginated %}
  <div style="margin-top:14px;display:flex;gap:10px;flex-wrap:wrap">
    {% if page_obj.has_previous %}
      <a class="btn" href="?page={{ page_obj.previous_page_number }}">Previous</a>
    {% endif %}
    <span class="help" style="align-self:center">Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span>
    {% if page_obj.has_next %}
      <a class="btn" href="?page={{ page_obj.next_page_number }}">Next</a>
    {% endif %}
  </div>
{% endif %}
{% endblock %}