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

{% block title %}Actualité{% endblock %}

{% block body %}
<div class="container">
    <div class="shadow-lg p-3 mb-5 bg-white rounded">
        <h1 class="text-center my-5">Le blog</h1>

        <h5 class="text-center my-5 ">
            Partagez notre passion et retrouvez toute l’actualité du Musée et des articles sur les thèmes qui nous tiennent à cœur.
            <br><br>
        </h5>
    </div>
    <div class="row">
        {% for article in pagination.data %}
        {% set url = path('articles_show',{'slug': article.slug}) %}
    
        <div class="col-md-4 my-2">
            <div class="card border-secondary mb-3">
                <div class="card-header text-center">
                    <div class="text-left">
                        <small><em>Publié le {{ article.createdAt | date('d/m/y') }} à {{ article.createdAt | date('H:i')}}</em></small>
                    </div>
                    <br>
                    <a href="{{ url }}" target="_blank">
                        <h4 class="card-title">{{ article.titre }}</h4>
                    </a>
                </div>
                <div id="carouselExampleSlidesOnly" class="carousel slide carousel-fade" data-interval="3000"
                    data-ride="carousel">
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <a href="{{ url }}" target="_blank">
                                <img src="/uploads/{{article.coverImage}}" class="d-block w-100" alt="{{ article.slug }}">
                            </a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <span class="d-inline-block text-truncate" style="max-width: 300px;"></span>
                    <a href="{{ url }}" class="btn btn-primary" target="_blank">Lire la suite !</a>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% include 'shared/pagination.html.twig' with {'route': 'articles'} %}
</div>
{% endblock %}