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

{% block body %}
	<div class="bg-grey pt-50 pb-50">
		<div class="pb-50">
			<div class="container">
				<div class="row">
					<div class="col-lg-8">
						<div class="single-content2">
							<div class="entry-header entry-header-style-1 mb-50">
								<h1 class="entry-title mb-30 font-weight-900">
									{{article.titre}}
								</h1>
								<div class="row">
									<div class="col-md-6">
										<div class="entry-meta align-items-center meta-2 font-small color-muted">
											<p class="mb-5">
												<a class="author-avatar" href="#"><img class="img-circle" src="{{asset('assets/blog/imgs/authors/author-3.jpg')}}" alt=""></a>
												<a href="author.html">
													<span class="author-name font-weight-bold">Permis Facile</span>
												</a>
											</p>
											{% set minutes = (article.readingTime / 60)| round(0, 'ceil') %}
											<span class="mr-10">{{article.createdAt | format_datetime('long', 'none', locale='fr')}}</span>
											<span class="has-dot">{{minutes}}
												min de lecture</span>
										</div>
									</div>
									<div class="col-md-6 text-end d-none d-md-inline">
										<ul class="header-social-network d-inline-block list-inline mr-15">
											<li class="list-inline-item text-muted">
												<span>Partager sur :
												</span>
											</li>
											<li class="list-inline-item">
												<a class="social-icon fb text-xs-center" target="_blank" href="#">
													<i class="elegant-icon social_facebook"></i>
												</a>
											</li>
											<li class="list-inline-item">
												<a class="social-icon pt text-xs-center" target="_blank" href="#">
													<i class="elegant-icon social_pinterest "></i>
												</a>
											</li>
										</ul>
									</div>
								</div>
							</div>
							<!--end single header-->
							<figure class="image mb-30 m-auto text-center border-radius-10">
								<img class="border-radius-10" src="{{asset('uploads/blog/' ~ article.imageFileName)}}" alt="post-title"/>
							</figure>
							<!--figure-->
							<article class="entry-wraper mt-60 mb-50">

								<div class="entry-main-content dropcap wow fadeIn animated">
									{{ article.content | raw }}
									<!--Begin Subcrible-->
									<div class="border-radius-10 border bg-white mt-60 mb-30 p-30 wow fadeIn animated">
										<div class="row justify-content-between">
											<div class="col-md-5 mb-2 mb-md-0">
												<h5 class="font-weight-bold secondfont mb-30 mt-0">Ne manquez pas ça
												</h5>
												<p class="font-small">Les dernieres news et astuces dans votre boite mail</p>
											</div>
											<div class="col-md-7">
												<div class="row">
													<div class="col-md-12">
														<input type="text" class="form-control" placeholder="Entrez votre e-mail">
													</div>
													<div class="col-md-12 mt-2">
														<button type="submit" class="btn btn-primary btn-block">Valider</button>
													</div>
												</div>
											</div>
										</div>
									</div>
									<!--End Subcrible-->
								</div>

                                {% if article.tags %}
                                {# On transforme la chaine en tableau #}
                                {% set tagList = article.tags|split(';') %}
                                
                                <div class="entry-bottom mt-50 mb-60 wow fadeIn animated">
									<div class="tags">
										<span>
                                            Tags:
										</span>
                                        {% for tag in tagList %}
                                            {# On vérifie que le tag n'est pas vide (au cas où il y aurait un ; à la fin) #}
                                            {% if tag|trim is not empty %}
                                            <a href="#" rel="tag">
                                                <span class="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-xs font-semibold uppercase tracking-wide">
                                                    #{{ tag|trim }}
                                                </span>
                                            </a>
                                            {% endif %}
                                        {% endfor %}
                                </div>

                                {% endif %}
		
								{# 
								                            <div class="single-social-share clearfix wow fadeIn animated mb-60">
								                                <div class="entry-meta meta-1 font-small color-grey float-start mt-10">
								                                    <span class="hit-count"><i class="elegant-icon icon_star_alt mr-5"></i>Vous pouvez enregistrer ou partager cet article</span>
								                                   
								                                    <span class="hit-count mr-15"><i class="elegant-icon icon_comment_alt mr-5"></i>182 comments</span>
								                                    <span class="hit-count mr-15"><i class="elegant-icon icon_like mr-5"></i>268 likes</span>
								
								                                </div>
								                                <ul class="header-social-network d-inline-block list-inline float-md-end mt-md-0 mt-4">
								                                    <li class="list-inline-item text-muted"><span>Partager sur : </span></li>
								                                    <li class="list-inline-item"><a class="social-icon fb text-xs-center" target="_blank" href="#"><i class="elegant-icon social_facebook"></i></a></li>
								                                    <li class="list-inline-item"><a class="social-icon tw text-xs-center" target="_blank" href="#"><i class="elegant-icon social_twitter "></i></a></li>
								                                    <li class="list-inline-item"><a class="social-icon pt text-xs-center" target="_blank" href="#"><i class="elegant-icon social_pinterest "></i></a></li>
								                                </ul>
								                            </div> 
								                            #}

								<!--author box-->
								{# <div class="author-bio p-30 mt-50 border-radius-10 bg-white wow fadeIn animated">
								                                <div class="author-image mb-30">
								                                    <a href="author.html"><img src="{{asset('assets/blog/imgs/authors/author-3.jpg')}}" alt="" class="avatar"></a>
								                                </div>
								                                <div class="author-info">
								                                    <h4 class="font-weight-bold mb-20"><span class="vcard author"><span class="fn"><a href="author.html" title="Posted by Barbara Cartland" rel="author">Barbara Cartland</a></span></span>
								                                    </h4>
								                                    <h5 class="text-muted">About author</h5>
								                                    <div class="author-description text-muted">You should write because you love the shape of stories and sentences and the creation of different words on a page. </div>
								                                    <a href="author.html" class="author-bio-link mb-md-0 mb-3">View all posts (125)</a>
								                                    <div class="author-social">
								                                        <ul class="author-social-icons">
								                                            <li class="author-social-link-facebook"><a href="#" target="_blank"><i class="ti-facebook"></i></a></li>
								                                            <li class="author-social-link-twitter"><a href="#" target="_blank"><i class="ti-twitter-alt"></i></a></li>
								                                            <li class="author-social-link-pinterest"><a href="#" target="_blank"><i class="ti-pinterest"></i></a></li>
								                                            <li class="author-social-link-instagram"><a href="#" target="_blank"><i class="ti-instagram"></i></a></li>
								                                        </ul>
								                                    </div>
								                                </div>
								                            </div> #}
								<!--related posts-->
                                {% if article.relatedBlogArticles is not empty %}
                                    
									<div class="related-posts"> <div class="post-module-3">
										<div class="widget-header-2 position-relative mb-30">
											<h5 class="mt-5 mb-30">Recommandation</h5>
										</div>
										<div class="loop-list loop-list-style-1">
                                        {% for relatedArticle in article.relatedBlogArticles %}
                                            
											<article class="hover-up-2 transition-normal wow fadeInUp  animated">
												<div class="row mb-40 list-style-2">
													<div class="col-md-4">
														<div class="post-thumb position-relative border-radius-5">
															<div class="img-hover-slide border-radius-5 position-relative" style="background-image: url({{asset('uploads/blog/' ~ relatedArticle.imageFileName)}})">
																<a class="img-link" href="{{path('home_blog_show', {'slug':relatedArticle.slug})}}"></a>
															</div>
															<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>
													<div class="col-md-8 align-self-center">
														<div class="post-content">
															<div class="entry-meta meta-0 font-small mb-10">
																<a href="category.html">
																	<span class="post-cat text-primary">{{relatedArticle.categorie}}</span>
																</a>
															</div>
															<h5 class="post-title font-weight-900 mb-20">
																<a href="{{path('home_blog_show', {'slug':relatedArticle.slug})}}">{{relatedArticle.titre}}</a>
																<span class="post-format-icon">
																	<i class="elegant-icon icon_star_alt"></i>
																</span>
															</h5>
															<div class="entry-meta meta-1 float-start font-x-small text-uppercase">
																<span class="post-on">{{relatedArticle.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">3k views</span> #}
															</div>
														</div>
													</div>
												</div>
											</article>
                                            {% endfor %}
										</div>
									</div>
								</div>
								<!--More posts-->
                                {% endif %}

                                {# POPUP : RELATED ARTICLES #}
                                {# TODO : IMPLEMENT IT #}
								{# 
                                <div class="single-more-articles border-radius-5">
									<div class="widget-header-2 position-relative mb-30">
										<h5 class="mt-5 mb-30">You might be interested in</h5>
										<button class="single-more-articles-close">
											<i class="elegant-icon icon_close"></i>
										</button>
									</div>
									<div class="post-block-list post-module-1 post-module-5">
										<ul class="list-post">
											<li class="mb-30">
												<div class="d-flex hover-up-2 transition-normal">
													<div class="post-thumb post-thumb-80 d-flex mr-15 border-radius-5 img-hover-scale overflow-hidden">
														<a class="color-white" href="single.html">
															<img src="{{asset('assets/blog/imgs/news/thumb-1.jpg')}}" alt="">
														</a>
													</div>
													<div class="post-content media-body">
														<h6 class="post-title mb-15 text-limit-2-row font-medium">
															<a href="single.html">The Best Time to Travel to Cambodia</a>
														</h6>
														<div class="entry-meta meta-1 float-start font-x-small text-uppercase">
															<span class="post-on">27 Jan</span>
															<span class="post-by has-dot">13k views</span>
														</div>
													</div>
												</div>
											</li>
											<li class="mb-10">
												<div class="d-flex hover-up-2 transition-normal">
													<div class="post-thumb post-thumb-80 d-flex mr-15 border-radius-5 img-hover-scale overflow-hidden">
														<a class="color-white" href="single.html">
															<img src="{{asset('assets/blog/imgs/news/thumb-2.jpg')}}" alt="">
														</a>
													</div>
													<div class="post-content media-body">
														<h6 class="post-title mb-15 text-limit-2-row font-medium">
															<a href="single.html">20 Photos to Inspire You to Visit Cambodia</a>
														</h6>
														<div class="entry-meta meta-1 float-start font-x-small text-uppercase">
															<span class="post-on">27 August</span>
															<span class="post-by has-dot">14k views</span>
														</div>
													</div>
												</div>
											</li>
										</ul>
									</div>
								</div> 
                                #}

                                
								<!--Comments-->
							    {# <div class="comments-area">
                                    <div class="widget-header-2 position-relative mb-30">
                                        <h5 class="mt-5 mb-30">Comments</h5>
                                    </div>
                                    <div class="comment-list wow fadeIn animated">
                                        <div class="single-comment justify-content-between d-flex">
                                            <div class="user justify-content-between d-flex">
                                                <div class="thumb">
                                                    <img src="{{asset('assets/blog/imgs/authors/author-4.jpg')}}" alt="">
                                                </div>
                                                <div class="desc">
                                                    <p class="comment">
                                                        Vestibulum euismod, leo eget varius gravida, eros enim interdum urna, non rutrum enim ante quis metus. Duis porta ornare nulla ut bibendum
                                                    </p>
                                                    <div class="d-flex justify-content-between">
                                                        <div class="d-flex align-items-center">
                                                            <h5>
                                                                <a href="#">Rosie</a>
                                                            </h5>
                                                            <p class="date">6 minutes ago </p>
                                                        </div>
                                                        <div class="reply-btn">
                                                            <a href="#" class="btn-reply">Reply</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="comment-list wow fadeIn animated">
                                        <div class="single-comment justify-content-between d-flex">
                                            <div class="user justify-content-between d-flex">
                                                <div class="thumb">
                                                    <img src="{{asset('assets/blog/imgs/authors/author-2.jpg')}}" alt="">
                                                </div>
                                                <div class="desc">
                                                    <p class="comment">
                                                        Sed ac lorem felis. Ut in odio lorem. Quisque magna dui, maximus ut commodo sed, vestibulum ac nibh. Aenean a tortor in sem tempus auctor
                                                    </p>
                                                    <div class="d-flex justify-content-between">
                                                        <div class="d-flex align-items-center">
                                                            <h5>
                                                                <a href="#">Agatha Christie</a>
                                                            </h5>
                                                            <p class="date">December 4, 2026 at 3:12 pm </p>
                                                        </div>
                                                        <div class="reply-btn">
                                                            <a href="#" class="btn-reply">Reply</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="single-comment depth-2 justify-content-between d-flex mt-50">
                                            <div class="user justify-content-between d-flex">
                                                <div class="thumb">
                                                    <img src="{{asset('assets/blog/imgs/authors/author.jpg')}}" alt="">
                                                </div>
                                                <div class="desc">
                                                    <p class="comment">
                                                        Sed ac lorem felis. Ut in odio lorem. Quisque magna dui, maximus ut commodo sed, vestibulum ac nibh. Aenean a tortor in sem tempus auctor
                                                    </p>
                                                    <div class="d-flex justify-content-between">
                                                        <div class="d-flex align-items-center">
                                                            <h5>
                                                                <a href="#">Steven</a>
                                                            </h5>
                                                            <p class="date">December 4, 2026 at 3:12 pm </p>
                                                        </div>
                                                        <div class="reply-btn">
                                                            <a href="#" class="btn-reply">Reply</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="comment-list wow fadeIn animated">
                                        <div class="single-comment justify-content-between d-flex">
                                            <div class="user justify-content-between d-flex">
                                                <div class="thumb">
                                                    <img src="{{asset('assets/blog/imgs/authors/author-3.jpg')}}" alt="">
                                                </div>
                                                <div class="desc">
                                                    <p class="comment">
                                                        Donec in ullamcorper quam. Aenean vel nibh eu magna gravida fermentum. Praesent eget nisi pulvinar, sollicitudin eros vitae, tristique odio.
                                                    </p>
                                                    <div class="d-flex justify-content-between">
                                                        <div class="d-flex align-items-center">
                                                            <h5>
                                                                <a href="#">Danielle Steel</a>
                                                            </h5>
                                                            <p class="date">December 4, 2026 at 3:12 pm </p>
                                                        </div>
                                                        <div class="reply-btn">
                                                            <a href="#" class="btn-reply">Reply</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div> #}
								<!--comment form-->
								{# <div class="comment-form wow fadeIn animated">
								                                <div class="widget-header-2 position-relative mb-30">
								                                    <h5 class="mt-5 mb-30">Leave a Reply</h5>
								                                </div>
								                                <form class="form-contact comment_form" action="#" id="commentForm">
								                                    <div class="row">
								                                        <div class="col-12">
								                                            <div class="form-group">
								                                                <textarea class="form-control w-100" name="comment" id="comment" cols="30" rows="9" placeholder="Write Comment"></textarea>
								                                            </div>
								                                        </div>
								                                        <div class="col-sm-6">
								                                            <div class="form-group">
								                                                <input class="form-control" name="name" id="name" type="text" placeholder="Name">
								                                            </div>
								                                        </div>
								                                        <div class="col-sm-6">
								                                            <div class="form-group">
								                                                <input class="form-control" name="email" id="email" type="email" placeholder="Email">
								                                            </div>
								                                        </div>
								                                        <div class="col-12">
								                                            <div class="form-group">
								                                                <input class="form-control" name="website" id="website" type="text" placeholder="Website">
								                                            </div>
								                                        </div>
								                                    </div>
								                                    <div class="form-group">
								                                        <button type="submit" class="btn button button-contactForm">Post Comment</button>
								                                    </div>
								                                </form>
								                            </div> #}
							</article>
						</div>
					</div>
					<div class="col-lg-4 primary-sidebar sticky-sidebar">
						<div class="widget-area">
							<div
								class="sidebar-widget widget-about mb-50 pt-30 pr-30 pb-30 pl-30 bg-white border-radius-5 has-border  wow fadeInUp animated">
								{# <img class="about-author-img mb-25" src="{{asset('assets/blog/imgs/authors/author.jpg')}}" alt=""> #}
								<h5 class="mb-20">Sommaire</h5>
                                {{article.summaryContent | raw}}
								{# <p class="font-medium text-muted">Hi, I’m Stenven, a Florida native, who left my career in corporate wealth management six years ago to embark on a summer of soul searching that would change the course of my life forever.</p> #}

							</div>
							{# <div class="sidebar-widget widget-latest-posts mb-50 wow fadeInUp animated">
							                            <div class="widget-header-1 position-relative mb-30">
							                                <h5 class="mt-5 mb-30">Most popular</h5>
							                            </div>
							                            <div class="post-block-list post-module-1">
							                                <ul class="list-post">
							                                    <li class="mb-30 wow fadeInUp animated">
							                                        <div class="d-flex bg-white has-border p-25 hover-up transition-normal border-radius-5">
							                                            <div class="post-content media-body">
							                                                <h6 class="post-title mb-15 text-limit-2-row font-medium"><a href="single.html">Spending Some Quality Time with Kids? It’s Possible</a></h6>
							                                                <div class="entry-meta meta-1 float-start font-x-small text-uppercase">
							                                                    <span class="post-on">05 August</span>
							                                                    <span class="post-by has-dot">150 views</span>
							                                                </div>
							                                            </div>
							                                            <div class="post-thumb post-thumb-80 d-flex ml-15 border-radius-5 img-hover-scale overflow-hidden">
							                                                <a class="color-white" href="single.html">
							                                                    <img src="{{asset('assets/blog/imgs/news/thumb-6.jpg')}}" alt="">
							                                                </a>
							                                            </div>
							                                        </div>
							                                    </li>
							                                    <li class="mb-30 wow fadeInUp animated">
							                                        <div class="d-flex bg-white has-border p-25 hover-up transition-normal border-radius-5">
							                                            <div class="post-content media-body">
							                                                <h6 class="post-title mb-15 text-limit-2-row font-medium"><a href="single.html">Relationship Podcasts are Having “That” Talk</a></h6>
							                                                <div class="entry-meta meta-1 float-start font-x-small text-uppercase">
							                                                    <span class="post-on">12 August</span>
							                                                    <span class="post-by has-dot">6k views</span>
							                                                </div>
							                                            </div>
							                                            <div class="post-thumb post-thumb-80 d-flex ml-15 border-radius-5 img-hover-scale overflow-hidden">
							                                                <a class="color-white" href="single.html">
							                                                    <img src="{{asset('assets/blog/imgs/news/thumb-7.jpg')}}" alt="">
							                                                </a>
							                                            </div>
							                                        </div>
							                                    </li>
							                                    <li class="mb-30 wow fadeInUp animated">
							                                        <div class="d-flex bg-white has-border p-25 hover-up transition-normal border-radius-5">
							                                            <div class="post-content media-body">
							                                                <h6 class="post-title mb-15 text-limit-2-row font-medium"><a href="single.html">Here’s How to Get the Best Sleep at Night</a></h6>
							                                                <div class="entry-meta meta-1 float-start font-x-small text-uppercase">
							                                                    <span class="post-on">15 August</span>
							                                                    <span class="post-by has-dot">16k views</span>
							                                                </div>
							                                            </div>
							                                            <div class="post-thumb post-thumb-80 d-flex ml-15 border-radius-5 img-hover-scale overflow-hidden">
							                                                <a class="color-white" href="single.html">
							                                                    <img src="{{asset('assets/blog/imgs/news/thumb-2.jpg')}}" alt="">
							                                                </a>
							                                            </div>
							                                        </div>
							                                    </li>
							                                </ul>
							                            </div>
							                        </div> #}

							{# <div class="sidebar-widget widget_instagram wow fadeInUp animated">
							                            <div class="widget-header-1 position-relative mb-30">
							                                <h5 class="mt-5 mb-30">Instagram</h5>
							                            </div>
							                            <div class="instagram-gellay">
							                                <ul class="insta-feed">
							                                    <li>
							                                        <a href="{{asset('assets/blog/imgs/thumbnail-3.jpg')}}" class="play-video" data-animate="zoomIn" data-duration="1.5s" data-delay="0.1s"><img class="border-radius-5" src="{{asset('assets/blog/imgs/news/thumb-1.jpg')}}" alt=""></a>
							                                    </li>
							                                    <li>
							                                        <a href="{{asset('assets/blog/imgs/thumbnail-4.jpg')}}" class="play-video" data-animate="zoomIn" data-duration="1.5s" data-delay="0.1s"><img class="border-radius-5" src="{{asset('assets/blog/imgs/news/thumb-2.jpg')}}" alt=""></a>
							                                    </li>
							                                    <li>
							                                        <a href="{{asset('assets/blog/imgs/thumbnail-5.jpg')}}" class="play-video" data-animate="zoomIn" data-duration="1.5s" data-delay="0.1s"><img class="border-radius-5" src="{{asset('assets/blog/imgs/news/thumb-3.jpg')}}" alt=""></a>
							                                    </li>
							                                    <li>
							                                        <a href="{{asset('assets/blog/imgs/thumbnail-3.jpg')}}" class="play-video" data-animate="zoomIn" data-duration="1.5s" data-delay="0.1s"><img class="border-radius-5" src="{{asset('assets/blog/imgs/news/thumb-4.jpg')}}" alt=""></a>
							                                    </li>
							                                    <li>
							                                        <a href="{{asset('assets/blog/imgs/thumbnail-4.jpg')}}" class="play-video" data-animate="zoomIn" data-duration="1.5s" data-delay="0.1s"><img class="border-radius-5" src="{{asset('assets/blog/imgs/news/thumb-5.jpg')}}" alt=""></a>
							                                    </li>
							                                    <li>
							                                        <a href="{{asset('assets/blog/imgs/thumbnail-5.jpg')}}" class="play-video" data-animate="zoomIn" data-duration="1.5s" data-delay="0.1s"><img class="border-radius-5" src="{{asset('assets/blog/imgs/news/thumb-6.jpg')}}" alt=""></a>
							                                    </li>
							                                </ul>
							                            </div>
							                        </div> #}
						</div>
					</div>
				</div>
			</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 %}