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

{% block title %}{{ parent() }} - Accueil{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    {{ encore_entry_link_tags('accueil') }}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {{ encore_entry_script_tags('accueil') }}
{% endblock %}

{% block body %}

	{% if evenement_alaune %}
    <div class="container alaune mt-4">
		<div class="row">
			<div class="col-12">
		    	<div class="actu mb-4">
					{% if evenement_alaune.imageName  %}
						<a href="{{ path('evenement', {'evenementSlug': evenement_alaune.slug}) }}">
							<img src="{{ vich_uploader_asset(evenement_alaune, 'imageFile') | imagine_filter('fiche_evenement') }}" alt="" class="img-fluid">
						</a>
					{%  endif %}
					<div class="encart">
				    	<p class="cat mb-4"><span style="background-color: {{ evenement_alaune.cycle.couleur }}">{{ evenement_alaune.cycle.nom }}</span></p>
						<h4 class="date text-center">{{ include('includes/_listing_evenement_date.html.twig', { 'evenement': evenement_alaune }, with_context = false) }}</h4>
				    	<h3><a href="{{ path('evenement', {'evenementSlug': evenement_alaune.slug}) }}">{{ evenement_alaune.titre }}</a></h3>
			    	</div>
				</div>
			</div>
		</div>
    </div>
	{% endif %}

	<div class="container">
		<div class="row events">
			{% for evenement in evenement_avenir %}
				<div class="col-md-6 col-xl-4">
					{{ include('includes/_listing_evenement.html.twig', { 'evenement': evenement }, with_context = false) }}
				</div>
			{% endfor %}
		</div>
		<div class="voirtout text-center">
			<a class="btn" href="{{ path('evenements') }}">voir tous les événements</a>
		</div>
	</div>

    <div class="container mt-4 seances">
		<div class="row">
			<div class="col-md-6 col-lg-8">
				<h2>Séances à venir</h2>
			</div>
			<div class="col-md-6 col-lg-4 text-right voirtout mb-4">
				<a class="btn fleche accueil-slider-prev">◄</a> <a class="btn" href="{{ path('programme') }}">voir tout</a> <a class="btn fleche accueil-slider-next">►</a>
			</div>
		</div>

		<div id="accueil-seance-slider" data-slick='{"rows": 0, "slidesToShow": 4, "slidesToScroll": 4, "infinite": false, "arrows": false }'>

			{% for seance in seance_avenir %}
				<div class="seance">
					<a href="{{ path('fiche_film', {'filmSlug': seance.film.slug}) }}">
						<p class="date mt-2">{{ seance.horaire | localizeddate('none', 'none', null, null, 'EEE') }} {{ seance.horaire | localizeddate('none', 'none', null, null, 'dd') }} {{ seance.horaire | localizeddate('none', 'none', null, null, 'LLL') }} {{ seance.horaire | localizeddate('none', 'none', null, null, 'YYYY') }}</p>
						<p class="heure mt-2">{{ seance.horaire|localizeddate('none', 'short') }}</p>
						<hr>
						<p class="real">
							{% for real in seance.film.realisateurs %}
								{{ real.nom }}{% if loop.last == false %}, {% endif %}
							{% endfor %}
						</p>
						<p class="film">{{ seance.film.titre }}</p>
					</a>
				</div>
			{% endfor %}

		</div>

    </div>

    <div class="container mt-4 mb-4">
		<div class="row">
			<div class="col-lg-6">
				<div class="evenements"><h2 class="text-center"><a href="{{path('documentation')}}">Documentation</a></h2></div>
			</div>
			<div class="col-lg-6">
				<div class="collections"><h2 class="text-center"><a href="{{ path('collections') }}">Collections</a></h2></div>
			</div>
		</div>
	</div>
{% endblock %}