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

{% block title %}{{ parent() }} - {{ cycle.nom | capitalize }}{% endblock %}

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

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

{% block body %}
    <div class="container-fluid">
    	<div class="container">

            <div class="mt-4">
                {% if cycle.imageName %}
                    <img class="img-fluid" src="{{ vich_uploader_asset(cycle, 'imageFile') | imagine_filter('fiche_cycle') }}" alt="">
                {% endif %}
                <div class="encart">
                    <p class="cat-cycle" style="background-color: {{ cycle.couleur }}">Cycle</p>
                    <h1>{{ cycle.nom | capitalize }}</h1>
                </div>
            </div>  

            <div class="row mt-4">
                <div class="col-md-12">
                    <div class="encart">
                        <h3>
                            Jusqu'au {{ cycles_srv.getDateFin(cycle) | localizeddate('long', 'none') }}
                        </h3>
                        <ul class="infosfilm">
                            <li>{{ cycles_srv.getNbSeanceAVenir(cycle) }} séances programmées (à venir)</li>
                            {% for k, evt in cycles_srv.getNbEvenementAVenir(cycle) %}
                            <li>{{ evt|length }}&nbsp;{{ k }}</li>
                            {% endfor %}
                        </ul>
                        {{ cycle.description|raw }}
                    </div>
                </div>
            </div>  
                    
            <div class="container mt-4 seances">
                <div class="row mt-4">
                    <div class="col-md-6 col-lg-8">
                        <h2>Séances du cycle</h2>
                    </div>
                    {% set seances = cycles_srv.getSeanceAVenir(cycle) %}
                    {%  if seances is not empty %}
                    <div class="col-md-6 col-lg-4 text-right voirtout mb-4">
                        <a class="btn fleche cycle-slider-prev">◄</a> <a class="btn" href="{{ path('programme') }}">voir tout</a> <a class="btn fleche cycle-slider-next">►</a>
                    </div>
                    {% endif %}
                </div>

                {% if seances is not empty %}
                <div id="cycle-seance-slider" data-slick='{"rows": 0, "slidesToShow": 4, "slidesToScroll": 4, "infinite": false, "arrows": false }'>
                    {% for seance in seances %}
                    <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 }}
                                {% endfor %}
                            </p>
                            <p class="film">{{ seance.film.titre }}</p>
                        </a>
                    </div>
                    {% endfor %}
                </div>
                {% endif %}
            </div>

            {% if seances is empty %}
            <div class="container">
                <div class="row mt-4">
                    <div class="col">
                        <div class="jumbotron">
                            <div class="container-fluid py-3">
                                <p class="h4">Aucune séance n'a pu être trouvé pour ce cycle.<br>
                                    Revenez plus tard ou essayez un autre cycle.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% endif %}

            <h2 class="mt-4">Événements du cycle</h2>
            {% set evenements = cycles_srv.getEvenementAVenir(cycle) %}
            {% if evenements is not empty %}
            <div class="row mb-4">
                {% for evenement in evenements %}
                    <div class="col-md-6 col-xl-4">
                        {{ include('includes/_listing_evenement.html.twig', { 'evenement': evenement, 'dans_fiche_cycle': true }, with_context = false) }}
                    </div>
                {% endfor %}
            </div>
            {% else %}
            <div class="container">
                <div class="row mt-4">
                    <div class="col">
                        <div class="jumbotron">
                            <div class="container-fluid py-3">
                                <p class="h4">Aucun évènement n'a pu être trouvée pour ce cycle.<br>
                                    Revenez plus tard ou essayez un autre cycle.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% endif %}

    	</div>
	</div>

{% endblock %}