{% extends "base.html" %}
{% load static i18n wagtailcore_tags wagtailimages_tags %}

{% block title %}{% trans "Blog" %}{% endblock title %}

{% block body_class %}template-blogindex{% endblock body_class %}

{% block content %}
  <h1 class="text-3xl font-bold mb-6 text-gray-800 text-center">
    {% trans "Blog" %}
  </h1>

  <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
    {% for post in posts %}
      <a href="{{ post.url }}" class="block bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
        {% image post.specific.image original %}
        <div class="p-4">
          <div class="flex justify-between items-center mb-2 text-gray-500">
            <div class="flex items-center gap-1">
              <i class="fi fi-br-circle-user leading-0"></i>
              <span class="text-sm">{{ post.specific.author }}</span>
            </div>
            <div class="flex items-center gap-1">
              <i class="fi fi-br-calendar leading-0"></i>
              <span class="text-sm">{{ post.first_published_at|date:"F j, Y | H:i" }}</span>
            </div>
          </div>
          <h2 class="text-xl font-semibold mb-2">{{ post.specific.title }}</h2>
          <p class="text-gray-600">{{ post.specific.description|truncatewords:20 }}</p>
        </div>
      </a>
    {% empty %}
      <p class="text-gray-600">{% trans "No blog posts available." %}</p>
    {% endfor %}
  </div>
{% endblock content %}