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

{% block title_start %}Podcasts
{% endblock %}

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

{% block main %}
	<main class="site-main">
		<div class="site-main-filter">
			<form action="{{ path('rsl_podcast_list') }}" method="get">
				<input type="text" name="search" id="search" placeholder="Rechercher un podcast" value="{{ app.request.query.get('search') }}">

				<select name="searchEmission">
					<option value="0" {% if app.request.query.get('searchEmission') == 0 %} selected {% endif %}>--Toutes les emissions--</option>
					{% for emission, emissionID in emissions %}
						<option value={{ emissionID }} {% if app.request.query.get('searchEmission') == emissionID %} selected {% endif %}>{{ emission }}</option>
					{% endfor %}
				</select>

				<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">
			<h1>Nos podcasts</h1>
			<div class="site-main-podcast-container">
				<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) }}', {{ podcast.getId }});" 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>
				</div>
			</main>
		{% endblock %}

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

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