{% extends "default.html" %}

{% block content %}
    <main role="main" class="container space-y-12">
        {% for post in posts | reverse %}
        <div class="space-y-2">
            <h2 class="flex flex-col gap-2">
                <span class="text-sm font-semibold text-gray-600 leading-none whitespace-nowrap">
                    {% if post.lang == "en" %}
                        {{ post.date_en }}
                    {% else %}
                        Le {{ post.date_fr }}
                    {% endif %}
                </span>
                <a href="{{ post.url }}" class="text-xl font-semibold text-gray-800 leading-none hover:underline">
                    {{ post.title }}
                </a>
            </h2>

            {% if loop.index < 20 %}
            <div class="prose">
                {% if post.description %}
                    {{ post.description }}
                {% endif %}
            </div>
            {% endif %}
        </div>
        {% endfor %}
    </main>
{% endblock content %}