{% extends "base_blog.html.twig" %}

{% block body %}
    <!--archive header-->
    <div class="archive-header pt-50 text-center">
        <div class="container">
            <h2 class="font-weight-900">{{categorie.titre}}</h2>
            <div class="breadcrumb">
                <a href="{{path('home')}}" rel="nofollow">Accueil</a>
                <span></span> 
                <a href="{{path('home_blog_index')}}" rel="nofollow">Blog</a>
                <span></span> 
                {{categorie.titre}}
            </div>
            <div class="bt-1 border-color-1 mt-30 mb-50"></div>
        </div>
    </div>
    <div class="container">
        <div class="loop-grid mb-30">
			<div class="row">
				<div class="col-lg-8 mb-30">
					<div class="carausel-post-1 hover-up border-radius-10 overflow-hidden transition-normal position-relative wow fadeInUp animated">
						<div class="arrow-cover"></div>
						<div class="slide-fade">
                            {# Featured Articles Slides #}
                            {% for article in categorie.articles %}
                                {% set minutes = (article.readingTime / 60)| round(0, 'ceil') %}
                                <div class="position-relative post-thumb">
                                    <div class="thumb-overlay img-hover-slide position-relative" style="background-image: url({{asset('uploads/blog/' ~ article.imageFileName)}})">
                                        <a class="img-link" href="{{path('home_blog_show', {'slug':article.slug})}}"></a>
                                        <span class="top-left-icon bg-warning">
                                            <i class="elegant-icon icon_star_alt"></i>
                                        </span>
                                        <div class="post-content-overlay text-white ml-30 mr-30 pb-30">
                                            <div class="entry-meta meta-0 font-small mb-20">
                                                <a href="category.html">
                                                    <span class="post-cat text-info text-uppercase">{{article.categorie}}</span>
                                                </a>
                                                {# 
                                                <a href="category.html">
                                                    <span class="post-cat text-success text-uppercase">Animal</span>
                                                </a> 
                                                #}
                                            </div>
                                            <h3 class="post-title font-weight-900 mb-20">
                                                <a class="text-white" href="single.html">{{article.titre}}</a>
                                            </h3>
                                            <div class="entry-meta meta-1 font-small text-white mt-10 pr-5 pl-5">
                                                <span class="post-on">{{article.createdAt | format_datetime('long', 'none', locale='fr')}}</span>
                                                <span class="hit-count has-dot">{{minutes}} min de lecture</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {% else %}

                            <div class="text-center">Il n'y a pas d'article ici pour l'instant</div>

                            {% endfor %}
							{# <div class="position-relative post-thumb">
								<div class="thumb-overlay img-hover-slide position-relative" style="background-image: url({{asset('assets/blog/imgs/news/news-6.jpg')}})">
									<a class="img-link" href="single.html"></a>
									<span class="top-left-icon bg-danger">
										<i class="elegant-icon icon_image"></i>
									</span>
									<div class="post-content-overlay text-white ml-30 mr-30 pb-30">
										<div class="entry-meta meta-0 font-small mb-20">
											<a href="category.html">
												<span class="post-cat text-info text-uppercase">Lifestyle</span>
											</a>
										</div>
										<h3 class="post-title font-weight-900 mb-20">
											<a class="text-white" href="single.html">This genius photo experiment shows we are all just sheeple in the consumer matrix</a>
										</h3>
										<div class="entry-meta meta-1 font-small text-white mt-10 pr-5 pl-5">
											<span class="post-on">26 August 2026</span>
											<span class="hit-count has-dot">18k Views</span>
										</div>
									</div>
								</div>
							</div> #}
						</div>
					</div>
				</div>
                {# Featured Articles Slides #}
                {% for article in categorie.articles %}
                {% set minutes = (article.readingTime / 60)| round(0, 'ceil') %}
                <article class="col-lg-4 col-md-6 mb-30 wow fadeInUp animated" data-wow-delay="0.2s">
                    <div class="post-card-1 border-radius-10 hover-up">
                        <div class="post-thumb thumb-overlay img-hover-slide position-relative" style="background-image: url({{asset('uploads/blog/' ~ article.imageFileName)}})">
                            <a class="img-link" href="{{path('home_blog_show', {'slug':article.slug})}}"></a>
                            <span class="top-right-icon bg-success">
                                <i class="elegant-icon icon_camera_alt"></i>
                            </span>
                            <ul class="social-share">
                                <li>
                                    <a href="#">
                                        <i class="elegant-icon social_share"></i>
                                    </a>
                                </li>
                                <li>
                                    <a class="fb" href="#" title="Share on Facebook" target="_blank">
                                        <i class="elegant-icon social_facebook"></i>
                                    </a>
                                </li>
                                <li>
                                    <a class="tw" href="#" target="_blank" title="Tweet now">
                                        <i class="elegant-icon social_twitter"></i>
                                    </a>
                                </li>
                                <li>
                                    <a class="pt" href="#" target="_blank" title="Pin it">
                                        <i class="elegant-icon social_pinterest"></i>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    
                        <div class="post-content p-30">
                            <div class="entry-meta meta-0 font-small mb-10">
                                <a href="{{path('home_blog_categorie', {'slug':article.categorie.slug})}}">
                                    <span class="post-cat text-info">{{article.categorie}}</span>
                                </a>
                                {# <a href="category.html">
                                    <span class="post-cat text-success">Food</span>
                                </a> #}
                            </div>
                            <div class="d-flex post-card-content">
                                <h5 class="post-title mb-20 font-weight-900">
                                    <a href="{{path('home_blog_show', {'slug':article.slug})}}">{{article.titre}}</a>
                                </h5>
                                <div class="entry-meta meta-1 float-start font-x-small text-uppercase">
                                    <span class="post-on">{{article.createdAt | format_datetime('long', 'none', locale='fr')}}</span>
                                    <span class="time-reading has-dot">{{minutes}} min de lecture</span>
                                    {# <span class="post-by has-dot">23k views</span> #}
                                </div>
                            </div>
                        </div>
                    </div>
                </article>
                {% endfor %}
			</div>
		</div>
    </div>

    {# Categories list #}
    <div class="site-bottom pt-50 pb-50">
        <div class="container">
            <div class="sidebar-widget widget-latest-posts mb-30 mt-20 wow fadeInUp animated">
                <div class="widget-header-2 position-relative mb-30">
                    <h5 class="mt-5 mb-30">Categories</h5>
                </div>
                <div class="carausel-3-columns">
                    {% for categorie in categories %}
                    <a href="{{path('home_blog_categorie', {'slug' : categorie.slug})}}">
                        <div class="carausel-3-columns-item d-flex bg-grey has-border p-25 hover-up-2 transition-normal border-radius-5">
                            <div class="post-thumb post-thumb-64 d-flex mr-15 border-radius-5 img-hover-scale overflow-hidden">
                                    <img src="{{asset('uploads/blog/categories/' ~ categorie.imageFileName )}}" alt="Categorie">
                            </div>
                            <div class="post-content media-body">
                                <h6> {{categorie.titre}} </h6>
                                {% if categorie.description != null %}
                                <p class="text-muted font-small">{{ categorie.description }}</p>
                                {% endif %}
                            </div>
                        </div>
                        </a>
                    {% endfor %}
                </div>
            </div>
        </div>
        <!--container-->
    </div>
{% endblock %}