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

{% block title %}Config{% endblock %}
{% block page_title %}Configuration{% endblock %}
{% block page_subtitle %}Hierarchical scope settings with inheritance (Extension A5){% endblock %}
{% block layer_indicator %}A5 Config Hierarchy{% endblock %}

{% block content %}
<div class="mb-6">
  <div class="bg-amber-50 border border-amber-200 rounded-lg p-4 text-sm text-amber-800">
    <strong>How config inheritance works:</strong>
    Settings defined at an org-level scope cascade down to child scopes. Child scopes can override
    any inherited value. When resolving a key, the ConfigResolver walks up the scope tree and returns
    the nearest match.
  </div>
</div>

{# Resolved Config Samples #}
{% if resolved_samples %}
<div class="mb-8">
  <h2 class="text-lg font-semibold text-slate-900 mb-4">Resolved Values (Inheritance Demo)</h2>
  <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">Scope</th>
          <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">Resolved Value</th>
          <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Source</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-slate-200">
        {% for item in resolved_samples %}
        <tr class="hover:bg-slate-50">
          <td class="px-4 py-3 text-sm font-medium text-slate-900">{{ item.scope_name }}</td>
          <td class="px-4 py-3 text-sm font-mono text-slate-700">{{ item.key }}</td>
          <td class="px-4 py-3 text-sm font-mono text-slate-600">{{ item.value|truncatewords:10 }}</td>
          <td class="px-4 py-3">
            {% if item.inherited %}
            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-purple-50 text-purple-700 ring-1 ring-purple-600/20">
              Inherited from {{ item.source }}
            </span>
            {% else %}
            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-700 ring-1 ring-green-600/20">
              Direct
            </span>
            {% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endif %}

{# Org-Level Settings #}
{% for group in scope_groups %}
<div class="mb-6">
  <div class="flex items-center gap-3 mb-3">
    {% if group.parent_scope_id %}
    <div class="flex items-center gap-1 text-xs text-slate-400">
      <span>{{ group.parent_name|default:"Parent" }}</span>
      <span>&rarr;</span>
    </div>
    {% endif %}
    <h2 class="text-base font-semibold text-slate-900">{{ group.scope_name }}</h2>
    {% if not group.parent_scope_id %}
    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-indigo-50 text-indigo-700 ring-1 ring-indigo-600/20">Org-Level</span>
    {% else %}
    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-slate-50 text-slate-600 ring-1 ring-slate-500/20">Child Scope</span>
    {% endif %}
    <span class="text-xs text-slate-400">{{ group.settings|length }} setting{{ group.settings|length|pluralize }}</span>
  </div>

  <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">Set By</th>
          <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Updated</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-slate-200">
        {% for setting in group.settings %}
        <tr class="hover:bg-slate-50">
          <td class="px-4 py-3 text-sm font-mono text-slate-800">{{ setting.key }}</td>
          <td class="px-4 py-3">
            <pre class="text-xs font-mono text-slate-600 bg-slate-50 rounded p-1.5 max-w-md overflow-x-auto">{{ setting.value }}</pre>
          </td>
          <td class="px-4 py-3 text-xs font-mono text-slate-400">{{ setting.set_by|truncate_id }}</td>
          <td class="px-4 py-3 text-xs text-slate-400">{{ setting.updated_at|format_dt }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% empty %}
{% include "components/_empty_state.html" with title="No configuration" message="No scope settings have been defined. Use the Config Hierarchy to define org-level defaults and per-team overrides." %}
{% endfor %}
{% endblock %}