{% extends "base.html" %}
{% load scoped_tags %}

{% block title %}{{ scope.name }}{% endblock %}
{% block page_title %}{{ scope.name }}{% endblock %}
{% block page_subtitle %}{{ scope.description|default:"Team scope" }}{% endblock %}
{% block layer_indicator %}L4 Tenancy · A5 Config{% endblock %}

{% block content %}
{# Tabs #}
<div class="border-b border-slate-200 mb-6">
  <nav class="flex gap-6">
    <a href="?tab=members" class="py-3 px-1 text-sm font-medium border-b-2 {% if active_tab == 'members' %}border-brand-600 text-brand-600{% else %}border-transparent text-slate-500 hover:text-slate-700{% endif %}">Members <span class="ml-1 bg-slate-100 text-slate-600 text-xs px-1.5 py-0.5 rounded-full">{{ members|length }}</span></a>
    <a href="?tab=services" class="py-3 px-1 text-sm font-medium border-b-2 {% if active_tab == 'services' %}border-brand-600 text-brand-600{% else %}border-transparent text-slate-500 hover:text-slate-700{% endif %}">Services <span class="ml-1 bg-slate-100 text-slate-600 text-xs px-1.5 py-0.5 rounded-full">{{ projections|length }}</span></a>
    <a href="?tab=config" class="py-3 px-1 text-sm font-medium border-b-2 {% if active_tab == 'config' %}border-brand-600 text-brand-600{% else %}border-transparent text-slate-500 hover:text-slate-700{% endif %}">Config <span class="ml-1 bg-slate-100 text-slate-600 text-xs px-1.5 py-0.5 rounded-full">{{ settings|length }}</span></a>
  </nav>
</div>

{% if active_tab == "members" %}
<div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
  <table class="min-w-full divide-y divide-slate-200">
    <thead class="bg-slate-50">
      <tr>
        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Principal</th>
        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Kind</th>
        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Role</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-slate-200">
      {# Owner row #}
      <tr>
        <td class="px-4 py-3 text-sm font-medium text-slate-700">Scope Owner</td>
        <td class="px-4 py-3 text-sm text-slate-500">—</td>
        <td class="px-4 py-3">{% include "components/_state_badge.html" with state="OWNER" %}</td>
      </tr>
      {% for m in members %}
      <tr>
        <td class="px-4 py-3 text-sm font-medium text-slate-700">{{ m.display_name }}</td>
        <td class="px-4 py-3 text-sm text-slate-500">{{ m.kind }}</td>
        <td class="px-4 py-3">{% include "components/_state_badge.html" with state=m.role %}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

{% elif active_tab == "services" %}
{% if projections %}
<div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
  <table class="min-w-full divide-y divide-slate-200">
    <thead class="bg-slate-50">
      <tr>
        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Service</th>
        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Access Level</th>
        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Projected At</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-slate-200">
      {% for p in projections %}
      <tr>
        <td class="px-4 py-3">
          <a href="{% url 'services_detail' p.object_id %}" class="text-sm font-medium text-brand-600 hover:text-brand-800">{{ p.data.name|default:p.object_id|truncate_id }}</a>
        </td>
        <td class="px-4 py-3">{% include "components/_state_badge.html" with state=p.access_level %}</td>
        <td class="px-4 py-3 text-xs text-slate-400">{{ p.projected_at|format_dt }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% else %}
<p class="text-sm text-slate-500">No services shared with this team.</p>
{% endif %}

{% elif active_tab == "config" %}
{% if settings %}
<div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
  <table class="min-w-full divide-y divide-slate-200">
    <thead class="bg-slate-50">
      <tr>
        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Key</th>
        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Value</th>
        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Description</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-slate-200">
      {% for s in settings %}
      <tr>
        <td class="px-4 py-3 text-sm font-mono font-medium text-slate-700">{{ s.key }}</td>
        <td class="px-4 py-3 text-sm font-mono text-slate-600">{{ s.value_json }}</td>
        <td class="px-4 py-3 text-xs text-slate-400">{{ s.description|default:"—" }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% else %}
<p class="text-sm text-slate-500">No configuration settings for this scope.</p>
{% endif %}
{% endif %}
{% endblock %}