{% extends 'front.html.twig' %}
{% block title %} News {% endblock %}
{% block stytesheets %}

    {{ parent() }}

{% endblock %}
{% block body %}

    <div class="main-content">
    <!-- Section: inner-header -->
    <section class="inner-header divider parallax layer-overlay overlay-white-8">
        <div class="container pt-60 pb-60">
            <!-- Section Content -->
            <div class="section-content">
                <div class="row">
                    <div class="col-md-12 text-center" style="margin-top: -45px;">
                        <h2 class="title bg-text-new">{{ new.title }}</h2>
                        <ol class="breadcrumb text-center text-black mt-10">
                            <li><a href="{{ path('home') }}">Accueil</a></li>
                            <li class="bg-text-new">Actualités</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Section: Service details -->
    <section>
    <div class="container">
    <div class="section-content">
    <div class="row">
    <div class="col-xs-12 col-sm-8 col-md-8 pull-left flip">
        <div class="row">
            <div class="col-md-12">
                <img alt="" class="img-responsive" src="{{ asset('uploads/images/'~new.picture) }}" style="min-width: 750px; min-height: 342px; object-fit: cover;"  />
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <h2 class="bg-text-new">{{ new.title }}</h2>
                <h5>
                    <span class="fa fa-calendar"> {{ new.date |date('d/m/Y') }}</span>
                </h5>
                <p class="lead">{{ new.description | raw }} <span
                            class="text-theme-colored2 font-weight-600"></span>.</p>

            </div>

            <div class="col-md-12">

            </div>
        </div>
        <div class="row mt-30">


        </div>
    </div>
    <div class="col-sx-12 col-sm-4 col-md-4 sidebar pull-right flip">
    <div class="widget">
        <div class="widget">
            <h4 class="widget-title">Dernières Actualités</h4>
            {% for new in lastNews %}

                <div class="latest-posts">
                    <article class="post media-post clearfix pb-0 mb-10">
                        <a class="post-thumb" href="{{ path('actualite_detail', {'id': new.id}) }}">
                            {% if new.picture is not null %}

                                <img class="imgListMediaLast"
                                     src="{{ asset('uploads/images/' ~ new.picture) }}">
                            {% else %}
                                <img class="imgListMediaLast"
                                     src="{{ asset('assets/images/meeting.jpg') }}">
                            {% endif %}

                            {#<img src="https://placehold.it/75x75" alt=""></a>#}</a>
                        <div class="post-right">
                            <h5 class="post-title mt-0"><a class="" href="{{ path('actualite_detail', {'id': new.id}) }}">{{ new.title }}</a></h5>
                            <p><i class="fa fa-calendar"></i>  {{ new.date | date("d/m/Y") }}</p>
                        </div>
                    </article>

                </div>

            {% endfor %}

            <a class="text-theme-colored font-weight-600"
               href="{{ path('actualite_list') }}">
                <span class="fa fa-angle-double-left"></span>
            Tous Actualités  </a>

        </div>

    </div>

        {#<div class="widget">#}
            {#<h3 class="line-bottom mt-0">Specialists</h3>#}
            {#<div class="owl-carousel-1col">#}
                {#{% for n in news %}#}
                {#<div class="item">#}
                    {#<div class="team text-center maxwidth400 bg-light">#}
                        {#<div class="thumb"><img class="img-fullwidth" src="{{ asset('uploads/images/'~n.picture) }}" style="width: 360px; height:  178px;"#}
                                                {#alt=""></div>#}
                        {#<div class="content p-15">#}
                            {#<h4 class="name mb-0 mt-0">#}
                                {#<span class="text-theme-colored" href="#">{{ n.title }}</span>#}
                            {#</h4>#}
                            {#<ul class="list-inline mt-5">#}
                                {#<li class="m-0 pl-10 pr-10"><i#}
                                            {#class="fa fa-calendar text-theme-colored"></i> <a href="#"#}
                                                                                           {#class="text-gray">{{ n.date | date ('d-m-y') }}</a>#}
                                {#</li>#}

                            {#</ul>#}
                        {#</div>#}
                    {#</div>#}
                {#</div>#}
                    {#{% endfor %}#}
            {#</div>#}
        {#</div>#}
        </div>
        </div>
        </div>
        </div>
        </section>

        </div>


        {% endblock %}

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