{% extends "sco_page.j2" %}

{% block styles %}
    {{super()}}
    <link href="{{sco.scu.STATIC_DIR}}/css/refcomp_parcours_niveaux.css" rel="stylesheet" type="text/css" />
    <link href="{{sco.scu.STATIC_DIR}}/css/parcour_formation.css" rel="stylesheet" type="text/css" />
{% endblock %}

{% macro menu_ue(niv, sem="pair", sem_idx=0) -%}
{% if niv['niveau'] %}
    {% if current_user.has_permission(sco.Permission.ScoChangeFormation) %}
        <select name="ue_niv_{{niv['niveau'].id}}" id="ue_niv_{{niv['niveau'].id}}"
            onchange="assoc_ue_niveau(event,
                        {{niv['niveau'].id}}, {{parcour.id}}
                    );"
            {% if niv['ue_'+sem] %}
                data-ue_id="{{niv['ue_'+sem].id}}"
            {% else %}
                data-ue_id=""
            {% endif %}
        >
            {%- if not niv['ue_'+sem] -%}
                <option value="">UE de S{{sem_idx}}</option>
            {%-else-%}
                <option value="">Désassocier</option>
            {%-endif-%}
            {% for ue in niv['ues_'+sem] %}
                <option value="{{ue.id}}"
                    {% if niv['ue_'+sem] and niv['ue_'+sem].id == ue.id -%}
                    selected
                    {%- endif %}
                >{{ue.acronyme}}</option>
            {% endfor %}
        </select>
    {% else %}
        {# Vue en lecture seule #}
        {% if niv['ue_'+sem] %}
            {{ niv['ue_'+sem].acronyme }}
        {% else %}
            <span class="fontred">{{sco.scu.EMO_WARNING|safe}} non associé</span>
        {% endif %}
    {% endif %}
{% endif %}
{%- endmacro %}

{% block app_content %}
<h2>{{formation.to_html()}}</h2>

{# Liens vers les différents parcours #}
<div class="les_parcours">
{% for parc in formation.referentiel_competence.parcours %}
<div class="{{'focus' if parcour and parc.id == parcour.id else ''}}">
<a href="{{
    url_for('notes.parcour_formation', scodoc_dept=g.scodoc_dept, 
    parcour_id=parc.id, formation_id=formation.id )
}}">{{parc.code}}</a>
</div>
{% endfor %}
</div>

{# Description d'un parcours #}
{% if parcour %}
<div class="parcour_formation">

<div class="titre_parcours">Parcours {{parcour.code}} « {{parcour.libelle}} »</div>

{% for comp in competences_parcour %}
{% set color_idx = 1 + loop.index0 % 6 %}
<div class="competence comp-c{{color_idx}}">
    <div class="titre_competence tc">
        Compétence {{comp['competence'].numero}}&nbsp;: {{comp['competence'].titre}}
    </div>
    <div class="niveaux">
    {% for annee, niv in comp['niveaux'].items() %}
        <div class="niveau comp-c{{color_idx}}-{{annee}}" 
            style="--color: var(--col-c{{color_idx}}-{{annee}});">
            <div class="titre_niveau n{{annee}}">
                {{niv['niveau'].libelle if niv['niveau'] else ''}}
                <span class="parcs">
                {% if niv['niveau'].is_tronc_commun %}
                    <span class="parc">TC</span>
                {% elif niv['niveau'].parcours|length > 1  %}
                    <span class="parc">
                    {% set virg = joiner(", ") %}
                    {% for p in niv['niveau'].parcours %}
                        {{ virg() }}{{p.code}}
                    {% endfor %}
                    </span>
                {% endif %}
                </span>
            </div>
            <div class="ue impair u{{annee}}1">
                {{ menu_ue(niv, "impair", 2*annee-1) }}
            </div>
            <div class="ue pair u{{annee}}1">
                {{ menu_ue(niv, "pair", 2*annee) }}
            </div>
        </div>
    {% endfor %}
    </div>
</div>
{% endfor %}
</div>
{% else %}
<div>
Choisissez un parcours...
</div>
{% endif %}

{# Liens bas de page #}
<div class="links">
    <div><a class="stdlink" href="{{
        url_for('notes.ue_table', 
            scodoc_dept=g.scodoc_dept, formation_id=formation.id )
    }}">Voir la formation</a>
    </div>
    <div><a class="stdlink" href="{{
        url_for('notes.refcomp_show', 
            scodoc_dept=g.scodoc_dept, refcomp_id=parcour.referentiel.id )
    }}">Référentiel de compétences</a>
    </div>
</div>

<script>
function assoc_ue_niveau(event, niveau_id) {
    let ue_id = event.target.value;
    let url = "";
    let must_reload = false;
    if (ue_id == "") {
        /* Dé-associe */
        ue_id = event.target.dataset.ue_id;
        const desassoc_url = '{{
        url_for(
            "apiweb.desassoc_ue_niveau",
            scodoc_dept=g.scodoc_dept,
            ue_id=11111
        )
        }}';
        url = desassoc_url.replace('11111', ue_id);
        must_reload=true;
    } else {
        const assoc_url = '{{
            url_for(
                "apiweb.assoc_ue_niveau",
                scodoc_dept=g.scodoc_dept,
                ue_id=11111, niveau_id=22222
            )
        }}';
        url = assoc_url.replace('11111', ue_id).replace('22222', niveau_id);
    }
    fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        /* body: JSON.stringify( {} ) */
    })
        .then(response => response.json())
        .then(data => {
            if (data.status) {
                sco_message(data.message);
                /* revert menu to initial state */
                event.target.value = event.target.dataset.ue_id;
            }
            location.reload();
        });
}
</script>

{% endblock %}