{% extends "components/base.html" %}

{% block title %}Blog Posts{% endblock %}

{% block main_area %}
<h1 class="pt-3 mb-4 fw-bold">📝 Latest Posts</h1>

{% if request.user.is_authenticated %}
  <div class="mb-4">
    <a href="{% url 'blog:create_post' %}" class="btn btn-success">
      <i class="bi bi-pencil-square"></i> Write a New Post
    </a>
  </div>
{% endif %}

<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
  {% for post in posts %}
    <div class="col">
      <div class="card h-100 shadow-sm">
        <div class="card-body d-flex flex-column">
          <h5 class="card-title fw-bold">{{ post.title }}</h5>
          <p class="card-text text-muted">{{ post.summary }}</p>
          <p class="card-text text-muted">{{ post.contents|truncatechars:50 }}</p>
          <div class="mt-auto">
            <a href="{{ post.get_absolute_url }}" class="btn btn-outline-primary w-100">
              Read More →
            </a>
          </div>
        </div>
        <div class="card-footer text-end small text-muted">
          {{ post.author }} · {{ post.created_at|date:"Y-m-d" }}
        </div>
      </div>
    </div>
  {% empty %}
    <p class="text-muted">No posts available yet.</p>
  {% endfor %}
</div>
{% endblock %}