{% extends 'base.html.twig' %}
{% block title %}Droits des pages{% endblock %}
{% block body %}
<main class="page-shell">
    <section class="intro">
        <p class="eyebrow">Administration</p>
        <h1>Droits des pages</h1>
        <p>Cochez les droits de chaque profil, puis enregistrez. Éditer donne aussi le droit de voir.</p>
        <p>Les droits des profils d’une personne se cumulent. Les autorisations métier par projet et les restrictions spécifiques restent nécessaires. Les administrateurs conservent tous les accès.</p>
    </section>
    {% include 'security/_flash_messages.html.twig' %}
    <form method="post" class="panel" data-page-permissions>
        <input type="hidden" name="_token" value="{{ csrf_token('page_permissions') }}">
        <div class="panel-heading">
            <h2>Pages et profils</h2>
            {{ include('components/button.html.twig', {label:'Enregistrer les droits', type:'submit', icon:'save'}) }}
        </div>
        <div class="table-wrap">
            <table class="data-table">
                <thead><tr><th scope="col">Page</th>{% for role, label in profiles %}<th scope="col">{{ label }}</th>{% endfor %}</tr></thead>
                <tbody>
                {% for page, label in pages %}
                    <tr><th scope="row">{{ label }}</th>
                    {% for role, profile in profiles %}
                        {% set locked = role == 'ROLE_ADMIN' or page == 'app_admin_page_permissions' %}
                        <td>
                        {% for action, caption in {view:'Voir', edit:'Éditer'} %}
                            <label><input type="checkbox" name="permissions[{{ page }}][{{ role }}][{{ action }}]" value="1" data-permission="{{ action }}" aria-label="{{ caption }} : {{ label }}, {{ profile }}" {{ matrix[page][role][action] ? 'checked' : '' }} {{ locked ? 'disabled' : '' }}> {{ caption }}</label>
                        {% endfor %}
                        </td>
                    {% endfor %}
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </form>
</main>
<script>
document.querySelector('[data-page-permissions]').addEventListener('change', function (event) {
    const input = event.target;
    if (!input.matches('[data-permission]')) return;
    const cell = input.closest('td');
    if (input.dataset.permission === 'edit' && input.checked) cell.querySelector('[data-permission="view"]').checked = true;
    if (input.dataset.permission === 'view' && !input.checked) cell.querySelector('[data-permission="edit"]').checked = false;
});
</script>
{% endblock %}