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

{% block body %}
    <main class="mt-5 pt-5">
        <div class="container">

            <section class="my-5">

                <!-- Section heading -->
                <h1 class="h1-responsive font-weight-bold text-center my-5">Les cours</h1>
                <!-- Section description -->
                <p class="text-center dark-grey-text w-responsive mx-auto mb-5">
                    Duis aute irure dolor in reprehenderit in
                    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>

                {% for category in categories %}
                    <div class="row">

                        <!-- Grid column -->
                        <div class="col-md-5 col-lg-4">

                        <!-- Featured image -->
                        <div class="view overlay rounded z-depth-1-half mb-lg-0 mb-4">
                            {{imgNoFile(category.covername, category.covertitle, 'auto', 'auto', 'img-fluid')|raw}}
                            <a>
                            <div class="mask rgba-white-slight">
                               
                            </div>
                            </a>
                        </div>

                        </div>
                        <!-- Grid column -->

                        <!-- Grid column -->
                        <div class="col-md-7 col-lg-8">

                        <!-- Post title -->
                        <h2 class="mb-3 {{ category.color }}-text"><strong>{{ category.title }}</strong></h2>
                        <!-- Excerpt -->
                        <p class="dark-grey-text">{{ category.description }}</p>
                
                        <!-- Read more button -->
                        <a class="btn btn-{{ category.color }} btn-md" href="{{path('category_show_user', { 'slug':category.slug})}}" >Voir les articles</a>

                        </div>
                        <!-- Grid column -->

                    </div>
                    <hr class="my-5">
                {% endfor %}

                <h2 class="h2-responsive text-center my-5">Les derniers cours</h2>
                <!-- Section description -->
                
                <div class="row">
                    {% for article in articles %}
                    
                            <div class="col-lg-4 col-md-6 col-sm-12 mb-lg-0 mb-4">

                            <!-- Featured image -->
                            <div class="view overlay rounded z-depth-2 mb-4">
                                 {{imgNoFile(article.covername, article.covertitle, 'auto', 'auto', 'img-fluid')|raw}}
                                <a>
                                <div class="mask rgba-white-slight">
                                    
                                </div>
                                </a>
                            </div>

                            <!-- Category -->
                            <a href="{{ path('category_show_user', {'slug' : article.slugCateg}) }}" class="pink-text">
                                <h6 class="font-weight-bold mb-3 {{ article.color }}-text"><i class="fas fa-map pr-2"></i>{{ article.titleCateg}}</h6>
                            </a>
                            <!-- Post title -->
                            <h3 class=" mb-3 "><strong>{{ article.title}}</strong></h3>
                        
                            <!-- Excerpt -->
                            <p class="dark-grey-text">{{ article.description}}</p>
                            <!-- Read more button -->
                            <a class="btn btn-{{ article.color }} btn-rounded btn-md" href="{{path('article_show', { 'slug':article.slug})}}">Voir plus</a>

                            </div>
                            <!-- Grid column -->
                    
                    {% endfor %}
                </div>

            </section>

        </div>
    </main>
{% endblock %}