{% extends "base.html" %}
{% block title %}Permissions — {{ role.name }}{% endblock %}
{% block content %}
<div class="container-fluid">
  <h1>Permissions du rôle « {{ role.name }} »</h1>
  <p class="text-muted">Les sections sont repliées par défaut. Utilisez « Tout sélectionner » pour appliquer toutes les permissions d’un module.</p>
  <form method="post">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    {% for module, permissions in permissions_list|groupby('module') %}
    {% set section_id = 'permissions-' ~ (module|slugify) %}
    <details class="card mb-3 permission-section">
      <summary class="card-header d-flex align-items-center gap-2" style="cursor:pointer;list-style:none">
        <span class="me-auto"><i class="bi bi-chevron-right section-chevron"></i> <strong>{{ permission_labels.get(module, module|replace('_', ' ')|title) }}</strong> <small class="text-muted">({{ permissions|length }})</small></span>
        <label class="small mb-0" onclick="event.stopPropagation()">
          <input type="checkbox" class="section-toggle me-1" data-section="section-{{ section_id }}"> Tout sélectionner
        </label>
      </summary>
      <div class="card-body row g-2">
        {% for permission in permissions %}
        <div class="col-xl-3 col-md-4">
          <label class="border rounded p-2 d-block h-100">
            <input type="checkbox" class="permission-check section-{{ section_id }}" name="permission_ids" value="{{ permission.id }}" {% if permission.id in selected %}checked{% endif %}>
            <strong>{{ permission.action }}</strong><br>
            <small class="text-muted">{{ permission.name }}</small>
          </label>
        </div>
        {% endfor %}
      </div>
    </details>
    {% else %}
    <p class="text-muted">Aucune permission. Exécutez la migration RBAC.</p>
    {% endfor %}
    <button class="btn btn-primary">Enregistrer les permissions</button>
    <a class="btn btn-outline-secondary ms-2" href="{{ url_for('admin.roles') }}">Annuler</a>
  </form>
</div>
<style>
.permission-section[open] .section-chevron { transform: rotate(90deg); }
.section-chevron { display:inline-block; transition:transform .15s ease; }
.permission-section > summary::-webkit-details-marker { display:none; }
</style>
<script>
document.querySelectorAll('.section-toggle').forEach(function(toggle) {
  var checks = document.querySelectorAll('.' + toggle.dataset.section);
  var sync = function() {
    var values = Array.from(checks);
    toggle.checked = values.length > 0 && values.every(function(check) { return check.checked; });
    toggle.indeterminate = values.some(function(check) { return check.checked; }) && !toggle.checked;
  };
  toggle.addEventListener('change', function(event) {
    event.stopPropagation();
    checks.forEach(function(check) { check.checked = toggle.checked; });
    toggle.indeterminate = false;
  });
  checks.forEach(function(check) { check.addEventListener('change', sync); });
  sync();
});
</script>
{% endblock %}