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

{% block title %}Catégorie - Articles{% endblock %}

{% block body %}
<div class="container mt-5 category-page">
    <h1 class="mb-4 text-center category-title">Articles de la catégorie</h1>
    <div class="row">
        {% if posts is empty %}
            <div class="col-12">
                <div class="alert alert-info">Aucun article dans cette catégorie.</div>
            </div>
        {% else %}
            {% for post in posts %}
                <div class="col-lg-4 col-12 mb-4 mb-4">
                    <article class="category-card card h-100 shadow-sm" itemscope itemtype="https://schema.org/Article">
                        <img src="{{ asset('uploads/images/' ~ (post.image is not empty ? post.image : 'news.png')) }}" 
                             class="category-card-img"
                             alt="{{ post.title|default('Image article') }}" 
                             itemprop="image"
                             loading="lazy">
                        <div class="card-body category-card-body">
                            <h2 class="h5 category-card-title" itemprop="headline">{{ post.title }}</h2>
                            <p class="category-card-subtitle" itemprop="description">{{ post.subtitle|slice(0,80) ~ '...' }}</p>
                            <div class="category-post-meta">
                                <small class="text-muted">
                                    <i class="fa-solid fa-user"></i> 
                                    <span itemprop="author">{{ post.auteur.pseudo }}</span><br>
                                    <i class="fa-solid fa-newspaper"></i> 
                                    <span itemprop="articleSection">{{ post.category.nameCategory }}</span>
                                </small>
                            </div>
                            <div class="mt-3">
                                <a href="{{ path('app_posts_show_user', {'id': post.id}) }}" 
                                   class="btn btn-sm category-btn"
                                   itemprop="url">
                                   <i class="fa-solid fa-circle-info"></i> Voir les détails
                                </a>
                            </div>
                        </div>
                    </article>
                </div>
            {% endfor %}
        {% endif %}
    </div>
</div>
{% endblock %}