{% extends 'base.html.twig' %}
{% block title %}{{ 'blog.index.title'|trans }}{% endblock %}
{% block meta_description %}{{ 'blog.index.meta_description'|trans }}{% endblock %}

{% block body %}
<section class="py-20">
    <div class="max-w-4xl mx-auto px-4">
        <h1 class="text-4xl sm:text-5xl font-extrabold text-center text-dark">{{ 'blog.index.heading'|trans }}</h1>
        <p class="mt-4 text-gray-500 text-lg text-center">{{ 'blog.index.subtitle'|trans }}</p>

        <div class="mt-12 space-y-8">
            {% for post in posts %}
            <a href="{{ path('app_blog_show', {slug: post.slug}) }}" class="group block bg-white rounded-2xl border border-gray-200 hover:shadow-xl transition-all duration-300 overflow-hidden">
                <div class="flex flex-col sm:flex-row">
                    <div class="sm:w-48 h-40 sm:h-auto bg-gray-100 shrink-0 flex items-center justify-center text-gray-400 text-xs">
                        {{ 'blog.index.image_placeholder'|trans }}
                    </div>
                    <div class="p-6">
                        <div class="flex items-center gap-3 mb-2">
                            <time class="text-xs text-gray-400" datetime="{{ post.publishedAt|date('c') }}">{{ post.publishedAt|date('d.m.Y') }}</time>
                            {% for tag in post.tags %}
                            <span class="px-2 py-0.5 rounded-full text-xs font-medium bg-scout/10 text-scout">{{ tag }}</span>
                            {% endfor %}
                        </div>
                        <h2 class="text-xl font-bold text-dark group-hover:text-scout transition">{{ post.title }}</h2>
                        <p class="mt-2 text-sm text-gray-600 leading-relaxed">{{ post.excerpt }}</p>
                        <p class="mt-3 text-sm font-semibold text-scout group-hover:underline">{{ 'blog.index.read_more'|trans }}</p>
                    </div>
                </div>
            </a>
            {% else %}
            <p class="text-gray-400 text-center py-12">{{ 'blog.index.empty'|trans }}</p>
            {% endfor %}
        </div>
    </div>
</section>
{% endblock %}