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

{% block jsonld %}
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
        {"@type": "ListItem", "position": 1, "name": "Accueil", "item": "{{ absolute_url(path('app_home')) }}"},
        {"@type": "ListItem", "position": 2, "name": "Blog", "item": "{{ absolute_url(path('app_article_show_all')) }}"},
        {"@type": "ListItem", "position": 3, "name": {{ categorie.name|json_encode|raw }}}
    ]
}
</script>
{% endblock %}

{% block body %}
<div class="container">
    <nav aria-label="breadcrumb" class="mb-3">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ path('app_home') }}">Accueil</a></li>
            <li class="breadcrumb-item"><a href="{{ path('app_article_show_all') }}">Blog</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{ categorie.name }}</li>
        </ol>
    </nav>
</div>

<div class="container">
    <div class="row">
        <div class="col-lg-8">
            <div class="page-detail">
                <h1 class="page-detail__title">{{ categorie.name }}</h1>

                <div class="page-detail__content article-detail__content">
                    {% if categorie.articles|length > 0 %}
                        <div class="row">
                            {% for article in categorie.articles %}
                                {% include 'article/item.html.twig' %}
                            {% endfor %}
                        </div>
                    {% else %}
                        <p class="text-muted">Aucun article dans cette categorie.</p>
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <aside class="blog-sidebar">
                {% include 'widgets/subscribe.html.twig' %}
                {% include 'widgets/categories.html.twig' %}
                {% include 'widgets/last_article.html.twig' %}
                {% include 'widgets/archives.html.twig' %}
            </aside>
        </div>
    </div>
</div>
{% endblock %}