{% extends "base.html" %}
{% from "_page_header.html" import page_header %}
{% block content %}
{{ page_header(title, "Manage access control and data governance rules across RAGCore.") }}

{% if empty %}
<div class="glass-panel rounded-lg p-lg text-center" role="status">
  <h2 class="text-headline-md font-headline-md text-on-surface mb-xs">No policies yet</h2>
  <p class="text-body-sm font-body-sm text-on-surface-variant">Workspace policies will appear here for authorized administrators.</p>
</div>
{% else %}
<div class="glass-panel rounded-lg overflow-hidden flex flex-col">
  <div class="overflow-x-auto">
    <table class="w-full text-left border-collapse">
      <caption class="sr-only">Policies in the current workspace</caption>
      <thead class="bg-[#0F172A] border-b border-[#1E293B]">
        <tr>
          <th scope="col" class="py-sm px-md text-label-caps font-label-caps text-on-surface-variant uppercase tracking-wider">Operation</th>
          <th scope="col" class="py-sm px-md text-label-caps font-label-caps text-on-surface-variant uppercase tracking-wider">Knowledge space</th>
          <th scope="col" class="py-sm px-md text-label-caps font-label-caps text-on-surface-variant uppercase tracking-wider">Required scopes</th>
          <th scope="col" class="py-sm px-md text-label-caps font-label-caps text-on-surface-variant uppercase tracking-wider">Status</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-[#1E293B]">
        {% for policy in policies %}
        <tr class="table-row-hover transition-colors">
          <th scope="row" class="py-md px-md text-code-sm font-code-sm text-primary-fixed-dim">{{ policy.operation }}</th>
          <td class="py-md px-md text-code-sm font-code-sm text-on-surface-variant">{{ policy.knowledge_space_id or "Workspace-wide" }}</td>
          <td class="py-md px-md text-code-sm font-code-sm text-on-surface-variant">
            {% for scope in policy.required_scopes %}<span class="inline-block bg-surface-bright px-1 py-0.5 rounded text-[10px] mr-1">{{ scope.value }}</span>{% else %}None{% endfor %}
          </td>
          <td class="py-md px-md">
            {% if policy.active %}
            <span class="inline-flex items-center gap-xs px-2 py-1 rounded-full bg-tertiary-container/10 border border-tertiary-container/20 text-tertiary font-label-caps text-label-caps uppercase"><span class="w-1.5 h-1.5 rounded-full bg-tertiary" aria-hidden="true"></span>Active</span>
            {% else %}
            <span class="inline-flex items-center gap-xs px-2 py-1 rounded-full bg-surface-variant border border-outline text-on-surface-variant font-label-caps text-label-caps uppercase"><span class="w-1.5 h-1.5 rounded-full bg-outline" aria-hidden="true"></span>Disabled</span>
            {% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endif %}
{% endblock %}