{# -*- mode: jinja-html -*- #}
{# -*- Edition des rôles/permissions -- inspiré de partition_editor -*- #}
{% extends "base.j2" %}
{% import 'bootstrap/wtf.html' as wtf %}

{% block styles %}
    {{super()}}
    <link rel="stylesheet" href="{{ scu.STATIC_DIR }}/css/partition_editor.css">
    <link rel="stylesheet" href="{{ scu.STATIC_DIR }}/css/role_editor.css">
{% endblock %}

{% block app_content %}

<h1>Définition des rôles et leurs permissions</h1>

<div class="help">Les rôles sont associés à un ensemble de permissions. Chaque
utilisateur peut avoir un nombre quelconque de rôles <em>dans chaque
département</em>. 
Sur cette page vous pouvez modifier les permissions associée à chaque rôle, ou créer de nouveaux rôles.
</div>

{# <div class="links">
<a class="stdlink" href="{{ url_for('scodoc.users') }}">liste des comptes utilisateurs</a>
</div> #}

<main>
	<section id="roles">
        <div class="permission-roles">
        {% for role in roles %}
        <div class="role">
            <div>{{role.name}}</div>
            <label title="Aucune permission">
                <input type="checkbox" name="{{role.id}}" value="aucun" checked="" class="">
                <span class="aucun"> - </span>                    
            </label>
            {% for permission_name in permissions_names %}
            <label>
                <input type="checkbox" 
                    name="{{role.id}}-{{Permission.get_by_name(permission_name)}}"
                    value="{{role.id}}-{{Permission.get_by_name(permission_name)}}"
                    {{"checked" if role.has_permission(Permission.get_by_name(permission_name)) else ''}}
                >
                <span data-permission="{{
                    Permission.get_by_name(permission_name)
                }}">{{permission_name}}</span>
            </label>
            {% endfor %}
        </div>
        {% endfor %}
        </div>
    </section>
</main>

<script>

function associe_role_permission() {
    alert("toto");
}

document.querySelectorAll("label").forEach(btn => { 
    btn.addEventListener("mousedown", (event) => { event.preventDefault() }) 
});
document.querySelectorAll(".role input").forEach(input => {
    input.addEventListener("input", associe_role_permission) 
});

</script>

{% endblock %}