{% extends 'front.html.twig' %}
{% block title %} Evénements {% endblock %}
{% block stytesheets %}
    {{ parent() }}
{% endblock %}
{% block body %}
<!-- Start Main Banner -->
<div class="page-title">
    <div class="d-table">
        <div class="d-table-cell">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 col-md-12">
                        <h3>Evénements</h3>
                        <ul>
                            <li><a href="">Home</a></li>
                            <li>/</li>
                            <li>Evénements</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End Main Banner -->

    <!-- Start Services Area -->
    <section class="services-area ptb-80">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-md-12">
                    <div class="shorting-menu">
                         {% for cat in cats %}
                             <a href="{{ path('event_all', {'id_category': cat.id}) }}">
                                 <button class="filter" {% if id_category == cat.id %} style=" background: #c61617; !important; box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.2); color: #fff;" {% endif %}>
                                     {{ cat.title }}
                                 </button>
                             </a>
                        {%  endfor %}
                    </div>
                </div>
            </div>

                <div class="shorting">
                    <div class="row">
                        {% for event in events %}
                            <div class="col-lg-4 col-md-6">
                                <div class="single-services">
                                    <div class="img">
                                        <img src="{{ asset('assets/img/event02.png') }}" alt="event">
                                    </div>
                                    <div class="content">
                                        <h3><i class="fa fa-line-chart"></i> <a href="{{ path('event_detail', {'id': event.id }) }}">{{ event.title }}</a></h3>
                                        <div align="justify">{{ event.description[:135] | raw }}</div>
                                        <a href="{{ path('event_detail', {'id': event.id }) }}" class="read-more-btn">
                                            <span class="left"><i class="fa fa-chevron-circle-right"></i></span>
                                            Read More
                                            <span class="right"><i class="fa fa-chevron-circle-right"></i></span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        {%  endfor %}
                    </div>
                    <div class="col-lg-12 col-md-12">
                            <div  class="pagination-area">
                                <nav aria-label="Page navigation">
                                    {{ knp_pagination_render(events) }}
                                </nav>
                            </div>
                    </div>
            </div>
        </div>
    </section>
    <!-- End Services Area -->

{% endblock %}

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