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

{% block og_title %}Articles{% endblock %}

{% block og_description %}Page listant l'ensemble des articles{% endblock %}

{% block title %}{{ parent() }} | Articles{% endblock %}

{% block body %}

    <div id="page">
        <div class="sub_header_in sticky_header">
            <div class="container">
                <h1>Sparker Blog</h1>
            </div>
            <!-- /container -->
        </div>

        <main>
            <div class="container margin_60_35">
                <div class="row">
                    <div class="col-lg-9">
                        <div class="row">
                            {% for article in articles %}
                            <div class="col-md-6">
                                <article class="blog">
                                    <figure>
                                        <a href="{{ path('blog_details_article', {'articleId':article.id}) }}"><img src="{{ article.imageArticle }}" alt="Image de l'article {{ article.titre }}">
                                            <div class="preview"><span>Read more</span></div>
                                        </a>
                                    </figure>
                                    <div class="post_info">
                                        <small>{{ article.categorie.nomCategorie }} - {{ article.datePublication|date('d/m/Y') }}</small>
                                        <h2><a href="{{ path('blog_details_article', {'articleId':article.id}) }}">{{ article.titre }}</a></h2>
                                        <p>{{ article.contenu|slice(0, 100) ~ ' ...' }}</p>
                                        <ul>
                                            <li></li>
                                            <li><i class="ti-comment"></i>20</li>
                                        </ul>
                                    </div>
                                </article>
                            </div>
                            {% endfor %}
                        </div>
                    </div>


                    <aside class="col-lg-3">
                        <div class="widget search_blog">
                            <div class="form-group">
                                <input type="text" name="search" id="search" class="form-control"
                                       placeholder="Search..">
                                <span><input type="submit" value="Search"></span>
                            </div>
                        </div>
                        <!-- /widget -->
                        <div class="widget">
                            <div class="widget-title">
                                <h4>Latest Post</h4>
                            </div>
                            <ul class="comments-list">
                                <li>
                                    <div class="alignleft">
                                        <a href="#0"><img src="img/blog-5.jpg" alt=""></a>
                                    </div>
                                    <small>Category - 11.08.2016</small>
                                    <h3><a href="#" title="">Verear qualisque ex minimum...</a></h3>
                                </li>
                                <li>
                                    <div class="alignleft">
                                        <a href="#0"><img src="img/blog-6.jpg" alt=""></a>
                                    </div>
                                    <small>Category - 11.08.2016</small>
                                    <h3><a href="#" title="">Verear qualisque ex minimum...</a></h3>
                                </li>
                                <li>
                                    <div class="alignleft">
                                        <a href="#0"><img src="img/blog-4.jpg" alt=""></a>
                                    </div>
                                    <small>Category - 11.08.2016</small>
                                    <h3><a href="#" title="">Verear qualisque ex minimum...</a></h3>
                                </li>
                            </ul>
                        </div>
                        <!-- /widget -->
                        <div class="widget">
                            <div class="widget-title">
                                <h4>Categories</h4>
                            </div>
                            <ul class="cats">
                                <li><a href="#">Food <span>(12)</span></a></li>
                                <li><a href="#">Places to visit <span>(21)</span></a></li>
                                <li><a href="#">New Places <span>(44)</span></a></li>
                                <li><a href="#">Suggestions and guides <span>(31)</span></a></li>
                            </ul>
                        </div>
                        <!-- /widget -->
                        <div class="widget">
                            <div class="widget-title">
                                <h4>Popular Tags</h4>
                            </div>
                            <div class="tags">
                                <a href="#">Food</a>
                                <a href="#">Bars</a>
                                <a href="#">Cooktails</a>
                                <a href="#">Shops</a>
                                <a href="#">Best Offers</a>
                                <a href="#">Transports</a>
                                <a href="#">Restaurants</a>
                            </div>
                        </div>
                        <!-- /widget -->
                    </aside>
                    <!-- /aside -->
                </div>
                <!-- /row -->
            </div>
            <!-- /container -->
        </main>

    </div>

{% endblock %}