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

{# Page 14 — Blog listing (T5)
   URL : /blog/ (optional ?categorie=Moteurs filter)
   Voir docs/pages.md page 14. #}

{% block body %}
<div class="tca">

    {% include '_components/breadcrumb.html.twig' %}

    <section class="tca-section">
        <div class="tca-container">
            <div class="tca-section-head">
                <span class="tca-eyebrow">Guides &amp; conseils techniques</span>
                <h1>Nos guides et conseils techniques industriels</h1>
                <p class="tca-lead">
                    Articles rédigés par nos techniciens sur les moteurs électriques, les pompes, les réducteurs, les variateurs et la maintenance industrielle.
                </p>
            </div>

            {% if categories|length > 0 %}
                <div class="tca-filter-chips" role="tablist" aria-label="Filtrer par catégorie">
                    <a href="{{ path('app_blog_index') }}" {% if not activeCategory %}class="is-active" aria-current="page"{% endif %} role="tab">Toutes les catégories</a>
                    {% for cat in categories %}
                        <a href="{{ path('app_blog_index', {categorie: cat}) }}"
                           {% if activeCategory == cat %}class="is-active" aria-current="page"{% endif %}
                           role="tab">{{ cat }}</a>
                    {% endfor %}
                </div>
            {% endif %}

            {% if articles|length == 0 %}
                <div class="tca-blog-empty">
                    <p>Aucun article publié pour le moment{% if activeCategory %} dans la catégorie <strong>{{ activeCategory }}</strong>{% endif %}.</p>
                    {% if activeCategory %}
                        <p><a href="{{ path('app_blog_index') }}" class="tca-link">Voir toutes les catégories</a></p>
                    {% endif %}
                </div>
            {% else %}
                <div class="tca-grid tca-grid--3">
                    {% for article in articles %}
                        <a href="{{ path('app_blog_article', {slug: article.slug}) }}" class="tca-article-card">
                            <div class="tca-article-card__image">
                                {% if article.imageUrl %}
                                    <img src="{{ asset(article.imageUrl) }}"
                                         alt="{{ article.imageAlt|default(article.title) }}"
                                         width="600" height="375"
                                         loading="lazy" decoding="async">
                                {% endif %}
                            </div>
                            <div class="tca-article-card__body">
                                <span class="tca-article-card__category">{{ article.category }}</span>
                                <h2 class="tca-article-card__title">{{ article.title }}</h2>
                                {% set _excerpt = article.excerpt|striptags %}
                                <p class="tca-article-card__excerpt">{{ _excerpt|length > 180 ? _excerpt|slice(0, 180)|trim ~ '…' : _excerpt }}</p>
                                <div class="tca-article-card__meta">
                                    <span>{{ article.publishedAt|date('d/m/Y') }}</span>
                                    <span>{{ article.readingMinutes }} min de lecture</span>
                                </div>
                            </div>
                        </a>
                    {% endfor %}
                </div>
            {% endif %}
        </div>
    </section>

</div>
{% endblock %}