{% extends 'front.html.twig' %}
{% block title %} Evénements {% endblock %}
{% block stytesheets %}
    {{ parent() }}
{% endblock %}
{% block body %}


    <div class="main-content">
        <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">Événements</h2>
                            <ol class="breadcrumb text-center text-black mt-10">
                                <li><a href="{{ path('home') }}">Accueil</a></li>
                                <li class="active text-theme-colored">Événements</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section id="  " class="pull-down-30">
            <div class="container">
                <div class="row multi-row-clearfix">

                    <!--start blog Section-->
                    <div class="blog-posts contenu-body" id="bodyEvents">
                        <section id="blog" class="">
                            <div class="container">
                                <div class="section-title text-center mt-0">
                                    <div class="row">
                                        <div class="col-md-8 col-md-offset-2">
                                            {#<h2 class="mt-0 line-height-1 text-uppercase">Tous <span class="text-theme-colored2">Evénements</span></h2>#}
                                            {#<div class="title-icon">#}
                                                {#<img class="mb-10" src="{{ asset('assets/images/title-icon.png') }}" alt="">#}
                                            {#</div>#}
                                        </div>
                                    </div>
                                </div>
                                <div class="section-content">
                                    <div class="row">
                                        {% for events in events %}
                                            <div class="col-sm-6 col-md-4">
                                                <article class="post clearfix maxwidth500 mb-sm-30">
                                                    <div class="entry-header">
                                                        <div class="post-thumb">
                                                            <a href="{{ path('event_detail', {'id' : events.id}) }}">

                                                            <img src="{{ asset('uploads/images/'~events.picture) }}" alt=""  class=" imgEvent img-responsive">
                                                            </a>
                                                        </div>
                                                        <div class="entry-date media-left text-center flip bg-theme-colored2 pt-5 pr-15 pb-5 pl-15">
                                                                <ul>
                                                                    <li class="font-16 text-white font-weight-600">{{ events.startDate | date('d') }}</li>
                                                                    <li class="font-12 text-white text-uppercase">{{ events.startDate | localizeddate('none', 'none', 'fr', null, 'MMM') }}</li>
                                                                </ul>
                                                        </div>
                                                    </div>
                                                    <div class="entry-content bg-lighter p-30">
                                                        <h3  class="  entry-title mt-0"><a href="{{ path('event_detail', {'id': events.id}) }}">{{ events.title }}</a>
                                                        </h3>
                                                        <h5>
                                        <span class="fa fa-calendar"> {{ events.startDate |date('d/m/Y') }} - {{ events.endDate| date('d/m/Y') }} - <span
                                                    class="fa fa-map-marker"></span>  {{ events.place }}</span>
                                                        </h5>
                                                        <div class="desc-event-list" style="text-align: justify;">{{ events.description[:200] | raw }}</div>
                                                        <a class="btn btn-theme-colored2 mt-10 mb-0 pull-right flip"
                                                           href="{{ path('event_detail', {'id': events.id}) }}">Détails
                                                            <span class="fa fa-angle-double-right"></span></a>



                                                            <div class="clearfix"></div>
                                                    </div>
                                                </article>
                                                <br>

                                            </div>
                                        {% endfor %}

                                    </div>
                                </div>
                            </div>
                        </section>
                        <section class="container">
                            <div class="row price_padng pull-down-20 pull-right">
                                <div class="col-md-12 col-xs-12">
                                    <nav class="pdg-tp-20 " aria-label="Page navigation">
                                        {{ knp_pagination_render(events) }}
                                    </nav>
                                </div>
                            </div>
                        </section>

                    </div>

                    <div class="blog-posts">

                        {#{% for event in events %}#}
                        {#<div class="col-md-3">#}
                        {#<article class="post clearfix mb-30 bg-lighter">#}
                        {#<div class="entry-header">#}
                        {#<div class="post-thumb thumb">#}
                        {#{% if event.picture is not null %}#}
                        {#<img class="img-responsive img-fullwidth" style="width: 276px; height: 183px;" src="{{ asset('uploads/images/' ~ event.picture) }}">#}
                        {#{% else %}#}
                        {#<img class="img-responsive img-fullwidth" style="width: 276px; height: 183px;" src="{{ asset('assets/images/meeting.jpg') }}">#}
                        {#{% endif %}#}
                        {#</div>#}
                        {#</div>#}
                        {#<div class="entry-content border-1px p-20 pr-10">#}
                        {#<div class="entry-meta media mt-0 no-bg no-border">#}
                        {#<div class="entry-date media-left text-center flip bg-theme-colored pt-5 pr-15 pb-5 pl-15">#}
                        {#<ul>#}
                        {#<li class="font-16 text-white font-weight-600">{{ event.startDate | date('d') }}</li>#}
                        {#<li class="font-12 text-white text-uppercase">{{ event.startDate | date('M') }}</li>#}
                        {#</ul>#}
                        {#</div>#}
                        {#<div class="media-body pl-15">#}
                        {#<div class="event-content pull-left flip">#}
                        {#<h4 class="entry-title text-white text-uppercase m-0 mt-5"><a#}
                        {#href="blog-single-right-sidebar.html">{{ event.title }}</a></h4>#}
                        {#<span class="mb-10 text-gray-darkgray mr-10 font-13"><i#}
                        {#class="fa fa-map-o mr-5 text-theme-colored"></i> {{ event.place }}</span>#}
                        {#<span class="mb-10 text-gray-darkgray mr-10 font-13"><i#}
                        {#class="fa fa-heart-o mr-5 text-theme-colored"></i> 895 Likes</span>#}
                        {#</div>#}
                        {#</div>#}
                        {#</div>#}
                        {#<p class="mt-10">{{ event.description |raw }}</p>#}
                        {#<a href="{{ path('event_show', {'id': event.id }) }}" class="btn btn-flat btn-dark btn-theme-colored btn-sm">Details <i class="fa fa-angle-double-right"></i></a>#}
                        {#<div class="clearfix"></div>#}
                        {#</div>#}
                        {#</article>#}
                        {#</div>#}
                        {#{% endfor %}#}

                        {#<div class="col-md-12">#}
                        {#<nav>#}
                        {#<ul class="pagination theme-colored">#}
                        {#<li> <a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li>#}
                        {#<li class="active"><a href="#">1</a></li>#}
                        {#<li><a href="#">2</a></li>#}
                        {#<li><a href="#">3</a></li>#}
                        {#<li><a href="#">4</a></li>#}
                        {#<li><a href="#">5</a></li>#}
                        {#<li><a href="#">...</a></li>#}
                        {#<li> <a href="#" aria-label="Next"> <span aria-hidden="true">»</span> </a> </li>#}
                        {#</ul>#}
                        {#</nav>#}
                        {#</div>#}
                    </div>
                </div>
            </div>
        </section>

    </div>

    <!-- Content Section Start -->


        <!-- Content Section End -->

        {% endblock %}

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