{% extends 'base.html' %}

{% block head %}

{% endblock %}

{% block body %}

<a href="#headerTop">
    <div class="goTop">
        <p>🍿</p>
    </div>
</a>

<img src="../static/images/background.svg" class="background_svg">


<div id="map"></div>

<div class="planning">
    <div class="container_titrePlanning">
        <div class="contenu_edt">
            <h2 class="txt_edt">Emploi du temps</h2>
            <div class="calendrier">
            {% for date in dates %}
                {% if date.choisi %}
                <div class="date-selectionne">
                    <p class="jour">{{date.jour}}</p>
                    <p class="chiffre">{{date.chiffre}}</p>
                    <p class="mois">{{date.mois}}</p>
                </div>
                {% else %}
                <a href="{{ url_for('home', delta=date.index) }}">
                    <div class="date">
                        <p class="jour">{{date.jour}}</p>
                        <p class="chiffre">{{date.chiffre}}</p>
                        <p class="mois">{{date.mois}}</p>
                    </div>
                </a>
                {% endif %}
            {% endfor %}
            </div>
        </div>
        <div class="line"></div>
    </div>
    {% for film in films %}
    <div class="container_infoFilm">
        <img src={{ film.affiche }} class="affiche" />
        <div class="infoFilm">
            <div class="blur-background"></div>
            <div>
                <h3 class="titreFilm"><a href="{{ film.url }}">{{film.title}}</a></h3>
                <div class="info-content">
                    <p class="realisateur">Réalisateur : {{film.director}}</p>
                    <p class="casting">Casting : {{ film.casting }}</p>
                    <p class="genre">Genre : {{ film.genres }}</p>
                    <p class="duree">Durée : {{film.duree}}</p>
                </div>
                <div class="synopsis_container">
                    <p class="synopsis">
                        {{film.synopsis}}
                    </p>
                </div>
            </div>
        </div>
    </div>

    <div style="height: 10px;"></div>
    {% for cinename, seances in film.seances.items() %}
    <div class="seance_container">
        <div class="cinema">
            <p>{{cinename}}</p>
        </div>
        <div class="horaires_container">
            {% for seance in seances %}
            <div class="horaire">
                <p>{{seance}}</p>
            </div>
            {% endfor %}
        </div>
    </div>
    <div class="responsive-petite-div"></div>
    {% endfor %}
    <div class="responsive-div"></div>
    {% endfor %}

</div>

<script>
    var map = L.map('map').setView([48.396205, -4.477066], 13);

    var myicon = L.icon({
        iconUrl: "static/images/point.png",
        iconSize: [16,16]
    })

    L.tileLayer('https://tile.jawg.io/jawg-lagoon/{z}/{x}/{y}{r}.png?access-token={accessToken}', {
        attribution: '<a href="https://jawg.io" title="Tiles Courtesy of Jawg Maps" target="_blank">&copy; <b>Jawg</b>Maps</a> &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
        minZoom: 0,
        maxZoom: 22,
        accessToken: '{{ JAWG_API_KEY }}'
    }).addTo(map);

    var locations = [
        { coordinates: [48.390703, -4.487735], description: "Multiplexe Liberté" },
        { coordinates: [48.397928, -4.473556], description: "CGR Brest Le Celtic" },
        { coordinates: [48.396202, -4.477066], description: "Les Studios" },
        { coordinates: [48.389641, -4.498722], description: "Pathé Capucins" },
        { coordinates: [48.446953, -4.265552], description: "Cinéma Galaxy" },
    ];

    locations.forEach(function (location) {
        new L.Marker(location.coordinates, {icon: myicon})
            .addTo(map)
            .bindPopup(location.description);
    });
</script>


{% endblock %}