{% extends "sco_page_dept.j2" %}

{% block styles %}
    {{super()}}
    <link href="{{scu.STATIC_DIR}}/css/refcomp_parcours_niveaux.css" rel="stylesheet" type="text/css" />
    <link href="{{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.EditFormation) %}
        <select name="ue_niv_{{niv['niveau'].id}}" id="ue_niv_{{niv['niveau'].id}}"
            onchange="ue_assoc_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="" class="non_associe">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">{{scu.EMO_WARNING|safe}} non associé</span>
        {% endif %}
    {% endif %}
{% endif %}
{%- endmacro %}

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

{# Liens vers les différents parcours #}
<div class="les_parcours">
{% for parc in formation.referentiel_competence.parcours %}
<div class="parc {{'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 class="link">
<a class="stdlink" target="_blank" rel="noopener noreferrer" href="{{
        url_for('notes.refcomp_show',
            scodoc_dept=g.scodoc_dept, refcomp_id=formation.referentiel_competence.id )
    }}">référentiel de compétences</a>
</div>
<div class="link"><a class="stdlink" href="{{
        url_for('notes.ue_table',
            scodoc_dept=g.scodoc_dept, formation_id=formation.id )
    }}">formation</a>
</div>
</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}}">
                <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>
                {{niv['niveau'].libelle if niv['niveau'] else ''}}
                {% if niv["warning"] %}
                    <div class="niveau-warning">{{scu.EMO_WARNING|safe}} {{niv["warning"]}}</div>
                {% endif %}
            </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>
<div class="recap_ects">
{{"%g"|format(ects_parcours)}} ECTS dans ce parcours.
</div>
{% else %}
<div>
Choisissez un parcours...
</div>
{% endif %}


{% if parcour %}
    <div class="help">

    <p> Cette page représente le parcours <span class="parc">{{parcour.code}}</span>
    du référentiel de compétence {{formation.referentiel_competence.specialite}}, et permet
    d'associer à chaque semestre d'un niveau de compétence une UE de la formation
    <a class="stdlink"
    href="{{url_for('notes.ue_table', scodoc_dept=g.scodoc_dept, formation_id=formation.id )
    }}">{{formation.html()}}
    </a>.</p>

    <p>Le symbole <span class="parc">TC</span> désigne un niveau du tronc commun
    (c'est à dire présent dans tous les parcours de la spécialité). </p>

    <p>Ce formulaire ne vérifie pas si l'UE est bien conçue pour ce parcours.</p>

    <p>Les modifications sont enregistrées au fur et à mesure.</p>

    </div>
{% endif %}

<script>
function ue_assoc_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.ue_desassoc_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.ue_assoc_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 %}