{% extends "ui/templates/base/layout.html" %}
{% import "ui/templates/components/macros.html" as ui %}
{% block content %}
<div class="grid gap-6 lg:grid-cols-[minmax(0,1fr)_360px]">
  <div class="rounded-3xl bg-white p-6 shadow-soft">
    <div class="flex items-center justify-between gap-4">
      <div><h2 class="text-xl font-semibold">Roles</h2><p class="mt-1 text-sm text-slate-500">Core RBAC matrix with search and pagination for safer maintenance.</p></div>
      <a href="/system-settings/rbac/permissions" class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">View permissions</a>
    </div>
    <div class="mt-6 overflow-hidden rounded-2xl border border-slate-200">
      {{ ui.search_bar('/system-settings/rbac/roles', filters.q, filters.per_page) }}
      {% if roles %}
      <table class="min-w-full divide-y divide-slate-200 text-sm">
        <thead class="bg-slate-50"><tr><th class="px-4 py-3 text-left font-semibold text-slate-600">Role</th><th class="px-4 py-3 text-left font-semibold text-slate-600">Permissions</th><th class="px-4 py-3 text-right font-semibold text-slate-600">Action</th></tr></thead>
        <tbody class="divide-y divide-slate-100">{% for role in roles %}<tr><td class="px-4 py-4"><div class="font-medium text-slate-900">{{ role.name }}</div><div class="text-xs text-slate-500">{{ 'Active' if role.is_active else 'Inactive' }}</div></td><td class="px-4 py-4"><div class="flex flex-wrap gap-2">{% for code in permissions_by_role.get(role.id, []) %}{{ ui.badge(code) }}{% else %}<span class="text-slate-400">No permissions</span>{% endfor %}</div></td><td class="px-4 py-4 text-right"><a href="/system-settings/rbac/roles/{{ role.id }}" class="rounded-xl border border-slate-300 px-3 py-2 text-xs font-medium text-slate-700 hover:bg-slate-50">{{ "Configure" if "rbac.manage" in current_user_permissions else "View" }}</a></td></tr>{% endfor %}</tbody>
      </table>
      {{ ui.pagination(roles_page, '/system-settings/rbac/roles', request.url.query) }}
      {% else %}<div class="p-6">{{ ui.empty_state('No roles matched the current filter.') }}</div>{% endif %}
    </div>
  </div>
  <div class="rounded-3xl bg-white p-6 shadow-soft"><h3 class="text-lg font-semibold">Create Role</h3>{% if "rbac.manage" in current_user_permissions and "System Admin" in current_user_roles %}<form method="post" action="/system-settings/rbac/roles/new" class="mt-5 space-y-4"><input type="hidden" name="csrf_token" value="{{ csrf_token }}" /><div><label class="mb-2 block text-sm font-medium text-slate-700">Role Name</label><input type="text" name="name" class="w-full rounded-2xl border border-slate-300 px-4 py-2.5 text-sm" placeholder="Ex: ComplianceAdmin" required /></div><label class="inline-flex items-center gap-3 rounded-2xl border border-slate-200 px-4 py-3 text-sm font-medium text-slate-700"><input type="checkbox" name="is_active" checked class="h-4 w-4 rounded border-slate-300" />Role is active</label><button type="submit" class="w-full rounded-xl bg-brand-600 px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-700">Create Role</button></form>{% else %}<div class="mt-5">{{ ui.alert('Only System Admin can create roles.', 'amber') }}</div>{% endif %}</div>
</div>
{% endblock %}