{% extends "base.html" %}

{% block title %}Blog{% endblock %}
{% block meta_description %}News, research notes, and community updates from {{ site_branding.site_name }}.{% endblock %}

{% block content %}
<section class="page-hero" aria-labelledby="blog-heading">
  <div class="page-hero-blobs" aria-hidden="true">
    <div class="blob blob--1"></div>
    <div class="blob blob--2"></div>
  </div>
  <div class="container">
    <div class="page-hero-content">
      <div class="section-badge">Insights and Updates</div>
      <h1 class="page-hero-title" id="blog-heading">Blog</h1>
      <p class="page-hero-subtitle">Research stories, project updates, and practical ideas from our community.</p>
    </div>
  </div>
</section>

<section class="section" aria-label="Blog posts">
  <div class="container">
    {% if posts %}
    <div class="blog-grid">
      {% for post in posts %}
      <article class="blog-card glass-card fade-in">
        {% if post.cover_image %}
        <a href="{{ post.get_absolute_url }}" class="blog-card-image">
          <img src="{{ post.cover_image.url }}" alt="{{ post.cover_image_alt|default:post.title }}" loading="lazy" />
        </a>
        {% endif %}
        <div class="blog-card-body">
          <p class="blog-meta">{{ post.published_at|date:"F j, Y" }}{% if post.author_name %} · {{ post.author_name }}{% endif %}</p>
          <h2 class="blog-card-title"><a href="{{ post.get_absolute_url }}">{{ post.title }}</a></h2>
          {% if post.excerpt %}<p class="blog-card-excerpt" {% if post.read_more_excerpt %}data-readmore="110"{% endif %}>{{ post.excerpt }}</p>{% endif %}
          <a href="{{ post.get_absolute_url }}" class="link-arrow">Read article</a>
        </div>
      </article>
      {% endfor %}
    </div>
    {% include "partials/_pagination.html" with page_obj=page_obj %}
    {% else %}
    <div class="empty-state-block glass-card"><p>No blog posts have been published yet.</p></div>
    {% endif %}
  </div>
</section>
{% endblock %}