{% extends "base.html" %}
{% from "_page_header.html" import page_header %}
{% block content %}
{{ page_header("Grants for " ~ space.name, "Manage access permissions for applications interacting with '" ~ space.name ~ "'.") }}

{% 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 grants yet</h2>
  <p class="text-body-sm font-body-sm text-on-surface-variant">No application is granted access to this knowledge space.</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">Application grants for {{ space.name }}</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">Application</th>
          <th scope="col" class="py-sm px-md text-label-caps font-label-caps text-on-surface-variant uppercase tracking-wider">Role</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 grant, application in grants %}
        <tr class="table-row-hover transition-colors">
          <th scope="row" class="py-md px-md">
            <div class="flex items-center gap-sm">
              <span class="material-symbols-outlined text-primary text-[18px]" aria-hidden="true">apps</span>
              <span class="font-headline-md text-body-sm text-on-surface">{{ application.name }}</span>
            </div>
          </th>
          <td class="py-md px-md">
            <span class="inline-flex items-center px-2 py-1 rounded-full border border-secondary text-secondary text-code-sm font-code-sm">{{ grant.role.value }}</span>
          </td>
          <td class="py-md px-md">
            {% if grant.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 %}