{% extends "layout.html" %}
{% block content %}
    <section class="container blog-container">
        <hgroup class="text-center mb-2">
            <h1>Publications</h1>
            <p class="text-muted">L'actualité et les analyses autour de l'Indice d'Autonomie Stratégique.</p>
        </hgroup>
        <div class="blog-list">
            {% for article in articles %}
                <div class="card-body {% if not article.published %}unpublished{% endif %}">
                    <div class="card-content">
                        <h2 class="card-title">
                            <a href="{{ url_for('main.blog_post', slug=article.slug) }}">
                                {{ article.title }}
                            </a>
                        </h2>
                        <p>
                            {% if article.content %}
                                {{ article.content | striptags | truncate(250) }}
                            {% else %}
                                ...
                            {% endif %}
                        </p>
                        <div class="media-group">
                            <div class="media-text ms-0 ms-md-2">
                                <span class="lead-text">
                                    Par {{ article.author.username }}
                                </span>
                                <ul class="nk-list-meta smaller">
                                    <li>
                                        <time datetime="{{ article.created_at.isoformat() }}">
                                            le {{ article.created_at.strftime("%d/%m/%Y") }}
                                        </time>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            {% else %}
                <div class="text-center text-muted empty-state">
                    <p>Aucun article publié pour le moment.</p>
                </div>
            {% endfor %}
        </div>
    </section>
{% endblock %}