{% extends "base.html" %}
{% block title %}Roles — {{ library_name() }}{% endblock %}
{% block content %}
<div style="display:flex; align-items:baseline; gap:1rem; margin-bottom:1rem">
  <h2 style="margin:0">Roles</h2>
  <a href="/ui/roles/new" role="button" class="outline" style="padding:0.25rem 0.75rem">+ New Role</a>
</div>

<table>
  <thead>
    <tr><th>Name</th><th>Type</th><th>Permissions</th><th>Users</th></tr>
  </thead>
  <tbody>
    {% for r in roles %}
    <tr>
      <td><a href="/ui/roles/{{ r.id }}">{{ r.name }}</a></td>
      <td>{% if r.is_system %}<em>Preset</em>{% else %}Custom{% endif %}</td>
      <td>
        {% if "*" in r.permissions %}
          Full access
        {% else %}
          {{ r.permissions | join(", ") or "—" }}
        {% endif %}
      </td>
      <td>{{ r.users | length }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>
{% endblock %}