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

{% block title %}{{ categorie.name }}{% endblock %}

{% block stylesheet %}
    {{ parent() }}
{% endblock %}

{% block url %}categorie/{{ category.name }}{% endblock %}
{% block m_url %}categorie/{{ category.name }}{% endblock %}

{% block loading %}{% endblock %}

{% block main %}
    <div role="main" class="main">

        <section class="page-header page-header-modern bg-color-light-scale-1 page-header-md ">
            <div class="container-fluid">
                <div class="row align-items-center">

                    <div class="col">
                        <div class="row">
                            <div class="col-md-12 align-self-center p-static order-2 text-center">
                                <div class="overflow-hidden pb-2">
                                    <h1 class="text-dark font-weight-bold text-9 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="100">{{ categorie.name }}</h1>
                                </div>
                            </div>
                            <div class="col-md-12 align-self-center order-1">
                                <ul class="breadcrumb d-block text-center appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="300">
                                    <li><a href="{{ path('app_home') }}">Accueil</a></li>
                                    <li><a href="{{ path('app_article') }}">Articles</a></li>
                                    <li class="active">{{ categorie.name }}</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </section>

        <div class="container py-2">
            <div class="overflow-hidden">
                <h2 class="text-light font-weight-bold text-9 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="100">Créations associés :</h2>
            </div>
            <div class="container">
                <div class="mt-2 pt-2">
                    <div class="row portfolio-list" data-sort-id="portfolio">
                        {% include 'article/list.html.twig' with { articles : categorie.articles } %}
                    </div>
                </div>
            </div>


        </div>

    </div>
{% endblock %}

{% block scripts %}
    {{ parent() }}
{% endblock %}