{% extends "base.html" %}
{% block content %}
<div class="page-header">
  <h1>Roles &amp; Permissions</h1>
  {% if current_user.has_permission('roles.create') %}
    <a href="/roles/new" class="btn btn-primary btn-sm"><i class="fa-solid fa-plus"></i> New Role</a>
  {% endif %}
</div>
<div class="row g-3">
{% for r in roles %}
  <div class="col-md-4">
    <a href="/roles/{{ r.id }}" class="card-panel d-block text-decoration-none text-dark h-100">
      <h2 class="h6 mb-1">{{ r.name }} {% if r.is_system %}<span class="tag-pill">system</span>{% endif %}</h2>
      <p class="text-muted small mb-1">{{ r.description }}</p>
      <p class="text-muted small mb-0">{{ r.permissions | length }} permissions · {{ r.users | length }} staff</p>
    </a>
  </div>
{% endfor %}
</div>
{% endblock %}