{# -*- mode: jinja-html -*- #}
{% extends "sco_page.j2" %}
{% block styles %}
    {{super()}}
    <link href="{{sco.scu.STATIC_DIR}}/css/refcomp_parcours_niveaux.css" rel="stylesheet" type="text/css" />
{% endblock %}

{% block app_content %}
<h2>Référentiel de compétences {{ref.type_titre}} {{ref.specialite_long}}</h2>

<div class="help">
    Référentiel chargé le {{ref.scodoc_date_loaded.strftime("%d/%m/%Y à %H:%M") if ref.scodoc_date_loaded else ""}} à
    partir du fichier <tt>{{ref.scodoc_orig_filename or "(inconnu)"}}</tt>.
</div>

<div class="refcomp_show">

<div>
    <ref-competences></ref-competences>
</div>

<script src="{{sco.scu.STATIC_DIR}}/js/ref_competences.js"></script>

{% include "but/refcomp_parcours_niveaux.j2" %}


<div class="liens">
<ul>
<li>Formations se référant à ce référentiel:
    <ul>
    {% for formation in ref.formations %}
        <li><a class="stdlink" href="{{
            url_for('notes.ue_table', scodoc_dept=g.scodoc_dept, formation_id=formation.id )
        }}">{{ formation.get_titre_version() }}</a></li>
    {% else %}
    <li><em>aucune</em></li>
    {% endfor %}
    </ul>
</li>
<li><a class="stdlink" href="{{url_for('notes.refcomp_table', scodoc_dept=g.scodoc_dept)}}">Liste des référentiels</a>
</li>
</ul>
</div>

</div>

{% endblock %}

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

<script>
    $(function () {
        let data_url = "{{data_source}}";
        $.getJSON(data_url, function (data) {
            document.querySelector("ref-competences").setData = data;
        });
    });
</script>

{% endblock %}