{% extends "sco_page.j2" %}
{% block styles %}
    {{super()}}

    <style>
        .highlight {
            cursor: pointer !important;
        }
        .highlight * {
            cursor: pointer !important;
        }

        #gtrcontent h2.titre {
            text-align: center;
            margin-top: 10px;
        }
        .content{
            width: 90%;
            max-width: 1600px;
        }
    </style>
{% endblock %}


{% block app_content %}
<div class="content">
    <h2 class="titre">{{titre}}</h2>
    {{calendrier | safe}}
</div>


{% endblock app_content %}

{% block scripts %}
{{ super() }}

<script>

const mode = "{{mode}}";
const url = new URL(window.location.origin + "{{url | safe}}");

document.addEventListener("DOMContentLoaded", ()=>{
    const highlight = document.querySelectorAll(".highlight");
    highlight.forEach((el)=>{
        el.addEventListener("click", (e)=>{
            if (mode == "jour"){
                const date = el.getAttribute("date");
                url.searchParams.set("day", date);
            }
            if (mode == "semaine"){
                const date = el.getAttribute("week_index");
                url.searchParams.set("week", date);
            }

            window.location.href = url;
        })
    })
})

</script>

{% endblock scripts %}