{% extends "admin/base.html" %}
{% block title %}Roles{% endblock %}
{% block content %}
<div class="page-header d-print-none">
  <h2 class="page-title">Roles ({{ roles | length }})</h2>
</div>
<div class="card">
  {% if perms.auth.add_role %}
  <div class="card-header flex-wrap gap-2 py-2">
    <a href="/admin/roles/new" class="btn btn-primary">New role</a>
  </div>
  {% endif %}
  <div class="table-responsive">
    <table class="table table-vcenter card-table">
      <thead>
        <tr>
          <th class="w-1 text-end">#</th>
          <th class="w-1">Actions</th>
          <th>Name</th>
          <th>Description</th>
          <th>Users</th>
          <th>Permissions</th>
        </tr>
      </thead>
      <tbody>
        {% for role in roles %}
        <tr{% if show_history %} data-history-url="/admin/roles/{{ role.id }}/history"{% endif %}>
          <td class="text-end text-secondary">{{ start_index + loop.index0 }}</td>
          <td>
            <div class="btn-list flex-nowrap">
            {% if perms.auth.change_role %}
            <a href="/admin/roles/{{ role.id }}" class="btn btn-sm">Edit</a>
            {% endif %}
            {% if not role.is_system and perms.auth.delete_role %}
            <form method="post" action="/admin/roles/{{ role.id }}/delete" class="d-inline"
                  data-confirm="Delete role '{{ role.name }}'? This cannot be undone.">
              <input type="hidden" name="csrf_token" value="{{ csrf_token }}"/>
              <button type="submit" class="btn btn-sm btn-danger">Delete</button>
            </form>
            {% endif %}
            </div>
          </td>
          <td>
            <a href="/admin/roles/{{ role.id }}">{{ role.name }}</a>
            {% if role.is_system %}<span class="badge bg-azure-lt ms-2">system</span>{% endif %}
          </td>
          <td class="text-secondary">{{ role.description }}</td>
          <td>{{ user_counts.get(role.id, 0) }}</td>
          <td>{{ role.permissions | length }}</td>
        </tr>
        {% else %}
        <tr><td colspan="6" class="text-center text-secondary py-4">No roles defined yet.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}