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

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

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

{% block body %}

    <div class="container programmation">
    	<h1 class="mt-4">Programme du mois</h1>
    	<p class="mb-4 fermeture">NB : la cinémathèque est fermée le lundi.</p>

		<div id="myBtnContainer">
		  <button class="btn active affichetout mb-2"> AFFICHER TOUS LES FILMS</button>
		  {% for cycleactif in cycles_principaux_prog %}
			  <button class="btn affichecycle mb-2" data-filtercycleid="filtrecycle{{ cycleactif.id }}" style="background-color: {{ cycleactif.couleur }};">&nbsp;{{ cycleactif.nom }}</button>
		  {% endfor %}
		</div>

    	<div class="row mt-4 mb-2">
    		<div class="col-12 col-md-2 joursemaine text-center d-none d-md-block">
    			Mardi
    		</div>
    		<div class="col-12 col-md-2 joursemaine text-center d-none d-md-block">
    			Mercredi
    		</div>
    		<div class="col-12 col-md-2 joursemaine text-center d-none d-md-block">
    			Jeudi
    		</div>
    		<div class="col-12 col-md-2 joursemaine text-center d-none d-md-block">
    			Vendredi
    		</div>
    		<div class="col-12 col-md-2 joursemaine text-center d-none d-md-block">
    			Samedi
    		</div>
    		<div class="col-12 col-md-2 joursemaine text-center d-none d-md-block">
    			Dimanche
    		</div>
    	</div>

		<!-- Semaine courante -->
		<div class="row">
			{% for ladate in periode[1:6] %}
				{{ include('includes/_jour_programmation.html.twig', { 'thedate': ladate, 'cycles_principaux_prog': cycles_principaux_prog }, with_context = false) }}
			{% endfor %}
    	</div>

		<!-- Semaine courante +1 -->
		<div class="row">
			{% for ladate in periode[8:6] %}
				{{ include('includes/_jour_programmation.html.twig', { 'thedate': ladate, 'cycles_principaux_prog': cycles_principaux_prog }, with_context = false) }}
			{% endfor %}
		</div>

		<!-- Semaine courante +2 -->
		<div class="row">
			{% for ladate in periode[15:6] %}
				{{ include('includes/_jour_programmation.html.twig', { 'thedate': ladate, 'cycles_principaux_prog': cycles_principaux_prog }, with_context = false) }}
			{% endfor %}
		</div>

		<!-- Semaine courante +3 -->
		<div class="row">
			{% for ladate in periode[22:] %}
				{{ include('includes/_jour_programmation.html.twig', { 'thedate': ladate, 'cycles_principaux_prog': cycles_principaux_prog }, with_context = false) }}
			{% endfor %}
		</div>

	</div>
{% endblock %}