{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="rounded-3xl bg-white p-6 shadow-soft">
  <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
    <div>
      <h2 class="text-xl font-semibold">Configure Role Permissions</h2>
      <p class="mt-1 text-sm text-slate-500">Role: <span class="font-medium text-slate-800">{{ role.name }}</span></p>
    </div>
    <a href="/system-settings/rbac/roles" class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Back to roles</a>
  </div>

  <form method="post" class="mt-6 space-y-6">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
    <div class="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
      {% for permission in permissions %}
      <label class="flex items-start gap-3 rounded-2xl border border-slate-200 p-4 hover:border-brand-300 hover:bg-brand-50/50">
        <input type="checkbox" name="permission_ids" value="{{ permission.id }}" {% if permission.id in assigned_permission_ids %}checked{% endif %} class="mt-1 h-4 w-4 rounded border-slate-300" />
        <span>
          <span class="block font-mono text-xs text-brand-700">{{ permission.code }}</span>
          <span class="mt-1 block text-sm font-medium text-slate-800">{{ permission.name }}</span>
        </span>
      </label>
      {% endfor %}
    </div>

    <div class="flex justify-end border-t border-slate-200 pt-5">
      {% if "rbac.manage" in current_user_permissions and "System Admin" in current_user_roles %}<button type="submit" class="rounded-xl bg-brand-600 px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-700">Save Role Permissions</button>{% else %}<span class="text-sm text-slate-500">View-only access</span>{% endif %}
    </div>
  </form>
</div>
{% endblock %}