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

{% block title_start %}Home
{% endblock %}

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

{% block main %}
	{{ parent() }}
	<main class="site-main">
		<div class="site-main-emissionAccueil">
			<h1>Découvrez nos émissions</h1>
			<div class="site-main-emissionAccueil-container">
				{% for emissionAccueil in emissionsAccueil %}
					<a href="{{ path('rsl_emission_detail', {'id': emissionAccueil.getEmission.getId}) }}">
						<div class="site-main-emissionAccueil-block">
							<div class="site-main-emissionAccueil-block-img">
								{% if emissionAccueil.getEmission.imageFileName is empty %}
									<img src="{{ asset('build/images/logo_rsl_globe_slogan.png') }}" alt="image-logo-rsl"/>
								{% else %}
									<img src="{{ asset('uploads/emission/' ~ emissionAccueil.getEmission.emissionDir ~ '/' ~ emissionAccueil.getEmission.imageFileName) }}" alt="image {{ emissionAccueil.getEmission.getName }}"/>
								{% endif %}
							</div>
							<h3>{{ emissionAccueil.getEmission.getName }}</h3>
							<p>{{ emissionAccueil.getEmission.getDescription|u.truncate(100)|raw }}...</p>
						</div>
					</a>
				{% endfor %}

				<a href="{{ path('rsl_emission_list') }}">
					<div class="site-main-emissionAccueil-block-plus block-plus">
						<h3>
							<i class="fas fa-plus-circle"></i>
							<span>Plus d'émissions</span>
						</h3>
					</div>
				</a>
			</div>
		</div>
		<div class="site-main-evenementAccueil">
			<h2>Les évènements à venir</h2>
			{% if events is defined and events is not null and events is not empty %}
				<div class="site-main-evenementAccueil-container">
					{% for event in events %}
						<a href="{{ path('rsl_agenda_detail', {'id': event.getId}) }}" class="site-main-evenementAccueil-container-event">
							<p class="site-main-evenementAccueil-container-event-icone">
								<i class="fas fa-calendar-alt fa-2x"></i>
							</p>
							<p class="site-main-evenementAccueil-container-event-date">
								{{ event.getDate|date("d/m") }}
							</p>
							<p class="site-main-evenementAccueil-container-event-titre">{{ event.getName }}</p>
							<p class="site-main-evenementAccueil-container-event-detail">
								<i class="fas fa-plus"></i>
							</p>
						</a>
					{% endfor %}
					<a href="{{ path('rsl_agenda') }}" class="site-main-evenementAccueil-container-event-plus">
						<p>
							<i class="fas fa-plus-circle"></i>
							Voir plus d'évènements
						</p>
					</a>
				</div>
			{% else %}
				<div>
					<p class="site-main-evenementAccueil-no-event">Pas d'évènement à venir</p>
				</div>
			{% endif %}
		</div>
	</main>
{% endblock %}

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

	<script>
		let slideIndex = 1;
const constTimeTimeOut = 8000;
const constTimeTimeOut2 = 20000;
let timeOut = constTimeTimeOut;
let timer;

prev = document.getElementById( "prev" )
prev.addEventListener( "click", () => {
previousSlide();
} );

next = document.getElementById( "next" )
next.addEventListener( "click", () => {
nextSlide();
} );

function timerChangeSile() {
timer = setTimeout( () => {
changeSlideNext();
timerChangeSile();
}, timeOut );
}

timerChangeSile();

function changeSlideNext() {
slideIndex += 1;
timeOut = constTimeTimeOut;

showSlide();
}

function nextSlide() {
slideIndex += 1;
timeOut = constTimeTimeOut2;

clearTimeout( timer );
timerChangeSile();
showSlide();
}

function previousSlide() {
slideIndex -= 1;
timeOut = constTimeTimeOut2;

clearTimeout( timer );
timerChangeSile();
showSlide();
}

function showSlidebyNumber( x ) {
slideIndex = x;
timeOut = constTimeTimeOut2;

clearTimeout( timer );
timerChangeSile();
showSlide();
}

function showSlide() {
let slides = document.getElementsByClassName( "slide" );
let dots = document.getElementsByClassName( "dot" );

for ( let i = 0; i < slides.length; i++ ) {
slides[ i ].style.display = "none";
dots[ i ].style.backgroundColor = "var(--grey)";
}

// slideIndex++;

if ( slideIndex > slides.length ) {
slideIndex = 1;
}

if ( slideIndex <= 0 ) {
slideIndex = slides.length;
}

slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].style.backgroundColor = "var(--dark)";
}
	</script>
{% endblock %}