{% 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">
    <h2 class="text-xl font-semibold">Permissions</h2>
    <p class="mt-1 text-sm text-slate-500">Searchable permission registry used by API guards and UI gate checks.</p>
    <div class="mt-6 overflow-hidden rounded-2xl border border-slate-200">
      {{ ui.search_bar('/system-settings/rbac/permissions', filters.q, filters.per_page) }}
      {% if permissions %}
      <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">Code</th><th class="px-4 py-3 text-left font-semibold text-slate-600">Name</th><th class="px-4 py-3 text-left font-semibold text-slate-600">Status</th></tr></thead>
        <tbody class="divide-y divide-slate-100">{% for permission in permissions %}<tr><td class="px-4 py-4 font-mono text-xs text-slate-700">{{ permission.code }}</td><td class="px-4 py-4 text-slate-700">{{ permission.name }}</td><td class="px-4 py-4">{{ ui.badge('Active','emerald') if permission.is_active else ui.badge('Inactive','rose') }}</td></tr>{% endfor %}</tbody>
      </table>
      {{ ui.pagination(permissions_page, '/system-settings/rbac/permissions', request.url.query) }}
      {% else %}<div class="p-6">{{ ui.empty_state('No permissions 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 Permission</h3>{% if "rbac.manage" in current_user_permissions and "System Admin" in current_user_roles %}<form method="post" action="/system-settings/rbac/permissions/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">Permission Code</label><input type="text" name="code" class="w-full rounded-2xl border border-slate-300 px-4 py-2.5 text-sm" placeholder="Ex: clients.manage" required /></div><div><label class="mb-2 block text-sm font-medium text-slate-700">Display 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: Manage Clients" 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" />Permission 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 Permission</button></form>{% else %}<div class="mt-5">{{ ui.alert('Only System Admin can create permissions.', 'amber') }}</div>{% endif %}</div>
</div>
{% endblock %}