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

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

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


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

<div class="flex flex-wrap -mx-4">
  {% for post in posts %}
    <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
      <a href="{{ post.url }}" class="block bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
        {% if post.blog_image %}
          {% image post.blog_image original alt=post.title class="w-full h-auto" %}
        {% endif %}
        <div class="p-4">
          <h2 class="text-xl font-semibold">{{ post.title }}</h2>
          <p class="text-gray-600">{{ post.excerpt|truncatewords:20 }}</p>
        </div>
      </a>
    </div>
  {% empty %}
    <p class="text-center text-gray-600 italic">{% trans "No blog posts yet." %}</p>
  {% endfor %}
</div>

{% endblock content %}