{% extends "base.html" %}
{% from "_page_header.html" import page_header %}
{% block content %}
{% call page_header(title, "Manage and monitor knowledge spaces and their access grants.") %}
<a href="/admin/control/spaces/new" class="btn-primary inline-flex items-center gap-xs px-md py-sm rounded-DEFAULT text-body-sm font-headline-md">
  <span class="material-symbols-outlined text-[16px]" aria-hidden="true">add</span>
  New knowledge space
</a>
{% endcall %}

{% 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 knowledge spaces yet</h2>
  <p class="text-body-sm font-body-sm text-on-surface-variant">Authorized spaces will appear here.</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">Knowledge spaces 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">Name</th>
          <th scope="col" class="py-sm px-md text-label-caps font-label-caps text-on-surface-variant uppercase tracking-wider">Slug</th>
          <th scope="col" class="py-sm px-md text-label-caps font-label-caps text-on-surface-variant uppercase tracking-wider">Data policy</th>
          <th scope="col" class="py-sm px-md text-label-caps font-label-caps text-on-surface-variant uppercase tracking-wider">Retention</th>
          <th scope="col" class="py-sm px-md text-label-caps font-label-caps text-on-surface-variant uppercase tracking-wider">Status</th>
          <th scope="col" class="py-sm px-md text-label-caps font-label-caps text-on-surface-variant uppercase tracking-wider text-right"><span class="sr-only">Actions</span></th>
        </tr>
      </thead>
      <tbody class="divide-y divide-[#1E293B]">
        {% for space in spaces %}
        <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">cloud</span>
              <span class="font-headline-md text-body-sm text-on-surface">{{ space.name }}</span>
            </div>
          </th>
          <td class="py-md px-md text-code-sm font-code-sm text-on-surface-variant">{{ space.slug }}</td>
          <td class="py-md px-md text-code-sm font-code-sm text-on-surface">{{ space.data_policy.value }}</td>
          <td class="py-md px-md text-code-sm font-code-sm text-on-surface">{{ space.retention_days or "None" }}</td>
          <td class="py-md px-md">
            {% if space.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 text-label-caps font-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 text-label-caps font-label-caps uppercase"><span class="w-1.5 h-1.5 rounded-full bg-outline" aria-hidden="true"></span>Inactive</span>
            {% endif %}
            {% if space.trust_required %}
            <span class="inline-flex items-center gap-xs px-2 py-1 rounded-full bg-primary-container/10 border border-primary-container/30 text-primary text-label-caps font-label-caps uppercase ml-1">Trust required</span>
            {% endif %}
          </td>
          <td class="py-md px-md text-right whitespace-nowrap">
            <a href="/admin/control/spaces/{{ space.id }}/documents" class="btn-ghost inline-flex items-center gap-xs px-md py-xs rounded-DEFAULT text-code-sm font-headline-md">View documents</a>
            <a href="/admin/control/spaces/{{ space.id }}/grants" class="btn-ghost inline-flex items-center gap-xs px-md py-xs rounded-DEFAULT text-code-sm font-headline-md ml-xs">View grants</a>
            {% if space.active %}
            <form method="post" action="/admin/control/spaces/{{ space.id }}/deactivate" class="inline" data-confirm="Deactivate '{{ space.name }}'? It will stop being searchable until reactivated.">
              <button type="submit" class="btn-ghost inline-flex items-center gap-xs px-md py-xs rounded-DEFAULT text-code-sm font-headline-md ml-xs">Deactivate</button>
            </form>
            {% else %}
            <form method="post" action="/admin/control/spaces/{{ space.id }}/activate" class="inline">
              <button type="submit" class="btn-ghost inline-flex items-center gap-xs px-md py-xs rounded-DEFAULT text-code-sm font-headline-md ml-xs">Activate</button>
            </form>
            {% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endif %}
{% endblock %}