{# Admin panel: roles (read-only por ahora).
   Variables esperadas: ``roles`` lista de dicts {key, label, description}.
#}
{% from "core/components/page_header.html" import page_header %}
{% from "core/components/card.html" import card %}

{% call page_header(title="Roles", subtitle="Permisos del sistema") %}{% endcall %}

<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
  {% for role in roles %}
  {% call card(title=role.label) %}
    <p class="card-body text-sm text-fg-muted">{{ role.description }}</p>
    <p class="mt-3 text-xs font-mono text-fg-muted">{{ role.key }}</p>
  {% endcall %}
  {% else %}
  <p class="text-sm text-fg-muted col-span-full">Sin roles definidos.</p>
  {% endfor %}
</div>