{% extends "layout.html" %}


{% block content %}
    <div class="container">
        <div class="row">
        {% for article in articles %}
            <div class="col-sm-6 col-md-4">
                <div class="thumbnail">
                    <img src="https://picsum.photos/id/{{ article['id'] }}/300/200" alt="Nature">
                    <div class="caption">
                       <h3 style="margin-top: 1em;">{{ article['title'] }}</h3>
                       <p>{{ article['excerpt']|truncate(100, True, '...') }}</p>
                       <p>
                           <a href="/articles/{{ article['id'] }}"
                              class="btn btn-xs btn-primary" role="button" title="Lire +">
                               Lire +
                           </a>
                       </p>
                    </div>
                </div>
            </div>
        {% endfor %}

        </div>
    </div>
{% endblock %}