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


{% block title_start %}
	{% if emission is defined or emission is not null %}
		{{ emission.getName }}
	{% else %}
		Emission
	{% endif %}
{% endblock %}

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

{% block main %}
	<main class="site-main">
		{% if emission %}
			<div class="site-main-emission">
				<div class="site-main-emission-img">
					{% if emission.imageFileName is empty %}
						<img src="{{ asset('build/images/logo_rsl_globe_slogan.png') }}" alt="image-logo-rsl"/>
					{% else %}
						<img src="{{ asset('uploads/emission/' ~ emission.emissionDir ~ '/' ~ emission.imageFileName) }}" alt="image {{ emission.getName }}"/>
					{% endif %}
				</div>
				<div class="site-main-emission-infos">
					<h1>{{ emission.getName }}</h1>
					<p class="site-main-emission-infos-description">{{ emission.getDescription|raw }}</p>

					{% if emission.getEmissionHoraire %}
						<div class="site-main-emission-infos-heure">
							<p class="site-main-emission-infos-heure-title">Heure</p>
							<div class="site-main-emission-infos-heure-horaire">
								{% for horaire in emission.getEmissionHoraire %}
									<p>{{ horaire.getJour.getFrName }}
										{{ horaire.getHeureDebut|date('H:i') }}
										-
										{{ horaire.getHeureFin|date('H:i') }}</p>
								{% endfor %}
							</div>
						</div>
					{% endif %}
				</div>
			</div>
			{% if emission.podcast is defined and emission.podcast is not empty and emission.podcast is not null %}
				<div class="site-main-podcast-filter">
					<form action="#" method="get">
						<input type="text" name="searchPodcast" id="searchPodcast" placeholder="Rechercher un podcast" value="{{ app.request.query.get('searchPodcast') }}">
						<button type="submit" class="btn btn-dark">
							<i class="fas fa-search-plus fa-lg"></i>
							Trouver
						</button>
					</form>
				</div>

				<div class="site-main-podcast-podcasts">
					<div class="site-main-podcast-podcasts-player">
						<audio src="" controls="controls" id="audioPlayer">
							Sorry, your browser doesn't support html5!
						</audio>
					</div>
					<div class="site-main-podcast-podcasts-playlist">
						{% for podcast in podcasts %}
							<div onclick="rsl_change_music('{{ asset('uploads/emission/' ~ podcast.emission.emissionDir ~ '/podcast/' ~ podcast.getAudioFileName) }}')" class="site-main-podcast-podcasts-playlist-titre" id="{{ podcast.getId }}">
								<p class="site-main-podcast-podcasts-playlist-titre-icone">
									<i class="far fa-play-circle fa-3x"></i>
								</p>
								<p class="site-main-podcast-podcasts-playlist-titre-title">{{ podcast.getName }}</p>
								{# <p class="site-main-podcast-podcasts-playlist-titre-emission">{{ podcast.getEmission.getName }}</p> #}
								<p class="site-main-podcast-podcasts-playlist-titre-description">{{ podcast.getDescription }}</p>
								<p class="site-main-podcast-podcasts-playlist-titre-date">{{ podcast.getDate|date("d/m/Y") }}</p>
							</div>
						{% endfor %}
					</div>
					{{ knp_pagination_render(podcasts) }}
				</div>
			{% endif %}
		{% endif %}
	</main>
{% endblock %}

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

	<script type="text/javascript">
		function rsl_change_music( music ) {
document.getElementById( "audioPlayer" ).pause();
document.getElementById( "audioPlayer" ).setAttribute( 'src', music );
document.getElementById( "audioPlayer" ).load();
document.getElementById( "audioPlayer" ).play();
}
	</script>
{% endblock %}