{% extends 'frontend/layout.html.twig' %}

{% block content %}
<div class="container single-template">

  <div class="page-header">
			<h1 class="page-title">
				L'actualité de la DGCS-ODD
			</h1>
		</div>
    
    {% for events in evenements %}
    <section class="category-section" style="margin-bottom: 30px;">
      <div class="container aos-init aos-animate" data-aos="fade-up">
          <div class="row g-5">
						<div class="col-lg-6">
							<div class="post-entry-1 lg">
								<a href="{{ path('evenement',  { 'id': events[0].id }) }}"><img src="{{ asset('dist/img/events/') }}{{events[0].photo}}" alt="" class="img-fluid" style="max-width: auto;height: 370px;"></a>
								<div class="post-meta">
									<span class="date">{{events[0].lieu}}</span>
									<span class="mx-1">•</span>
									<span>{{events[0].date | date('d/m/Y')}}</span>
								</div>
								<h2 style="font-size: 20px; padding: 0; margin: 0; color: #023b6d;">
									<a href="{{ path('evenement',  { 'id': events[0].id }) }}">{{events[0].title}}</a>
								</h2>
							</div>
						</div>

						<div class="col-lg-6">
							<div class="row g-5">
								{% for i in 1..4 %}
								{% if events|length > i %}
								<div class="col-lg-6 border-start custom-border" style="margin-bottom: 15px;">
									<div class="post-entry-1">
										<a href="{{ path('evenement',  { 'id': events[i].id }) }}"><img src="{{ asset('dist/img/events/') }}{{events[i].photo}}" alt="" class="img-fluid" style="max-width: auto;height: 150px;"></a>
										<div class="post-meta">
											<span class="date">{{events[i].lieu}}</span>
											<span class="mx-1">•</span>
											<span>{{events[i].date | date('d/m/Y')}}</span>
										</div>
										<h2 style="font-size: 14px; padding: 0; margin: 0; color: #023b6d;">
											<a href="{{ path('evenement',  { 'id': events[i].id }) }}">{{events[i].title}}</a>
										</h2>
									</div>
								</div>
								{% endif %}
								{% endfor %}

							</div>

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

</div>
{% endblock %}