{% extends 'base.html.twig' %}

{% block head %}
    {{ parent() }}
{% endblock %}

{% block titre %}
    Actualités - {{ parent() }}
{% endblock %}

{% block header %}
    {{ parent() }}
{% endblock %}

{% block body %}
    <div class="container py-5">
        <h1 class="text-center mb-5">Actualités</h1>
        
        {% if actualites is defined and actualites|length > 0 %}
            <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
                {% for actualite in actualites %}
                    <div class="col">
                        <div class="card h-100 shadow-sm">
                            {% if actualite.image %}
                                <img src="{{ asset('uploads/images/actualites/' ~ actualite.image) }}" class="card-img-top" alt="{{ actualite.titre }}">
                            {% else %}
                                <div class="bg-light text-center py-5">
                                    <i class="bi bi-image text-muted" style="font-size: 3rem;"></i>
                                </div>
                            {% endif %}
                            
                            <div class="card-body">
                                <h5 class="card-title">{{ actualite.titre }}</h5>
                                <p class="card-text">{{ actualite.contenu|striptags|slice(0, 150) ~ (actualite.contenu|length > 150 ? '...' : '') }}</p>
                            </div>
                            
                            <div class="card-footer bg-transparent">
                                <a href="{{ path('consulterActualite', {'id': actualite.id}) }}" class="btn btn-outline-info rounded-pill">Lire la suite</a>
                                <small class="text-muted float-end">{{ actualite.dateCreation|date('d/m/Y') }}</small>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        {% else %}
            <div class="empty text-center py-5">
                <i class="bi bi-newspaper display-1 text-muted mb-3"></i>
                <p>Aucune actualité n'est disponible pour le moment.</p>
            </div>
        {% endif %}
    </div>
{% endblock %}

{% block footer %}
    {{ parent() }}
{% endblock %}