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

{% block title %}{{ data.name|default:"Service" }}{% endblock %}
{% block page_title %}{{ data.name|default:"Service Detail" }}{% endblock %}
{% block page_subtitle %}{{ data.description|default:"" }}{% endblock %}
{% block layer_indicator %}L3 Objects · L4 Sharing · L6 Audit · L7 Rollback{% endblock %}

{% block content %}
{# Service header #}
<div class="bg-white rounded-xl border border-slate-200 shadow-sm p-5 mb-6">
  <div class="flex items-center justify-between">
    <div>
      <div class="flex items-center gap-3">
        <h3 class="text-lg font-bold text-slate-900">{{ data.name }}</h3>
        {% if is_owner %}
        <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">Owner</span>
        {% else %}
        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-700 ring-1 ring-blue-600/20">Shared</span>
        {% endif %}
      </div>
      <p class="text-sm text-slate-500 mt-1">
        ID: <span class="font-mono">{{ obj.id|truncate_id:16 }}</span>
        &middot; Owner: <span class="font-mono">{{ obj.owner_id|truncate_id }}</span>
        &middot; Created: {{ obj.created_at|format_dt }}
      </p>
    </div>
  </div>
</div>

{# Tabs #}
<div class="border-b border-slate-200 mb-6">
  <nav class="flex gap-6">
    <a href="?tab=overview" class="py-3 px-1 text-sm font-medium border-b-2 transition-colors {% if active_tab == 'overview' %}border-brand-600 text-brand-600{% else %}border-transparent text-slate-500 hover:text-slate-700{% endif %}">Overview</a>
    <a href="?tab=versions" class="py-3 px-1 text-sm font-medium border-b-2 transition-colors {% if active_tab == 'versions' %}border-brand-600 text-brand-600{% else %}border-transparent text-slate-500 hover:text-slate-700{% endif %}">
      Versions <span class="ml-1 bg-slate-100 text-slate-600 text-xs px-1.5 py-0.5 rounded-full">{{ versions|length }}</span>
    </a>
    <a href="?tab=sharing" class="py-3 px-1 text-sm font-medium border-b-2 transition-colors {% if active_tab == 'sharing' %}border-brand-600 text-brand-600{% else %}border-transparent text-slate-500 hover:text-slate-700{% endif %}">
      Sharing <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=audit" class="py-3 px-1 text-sm font-medium border-b-2 transition-colors {% if active_tab == 'audit' %}border-brand-600 text-brand-600{% else %}border-transparent text-slate-500 hover:text-slate-700{% endif %}">
      Audit <span class="ml-1 bg-slate-100 text-slate-600 text-xs px-1.5 py-0.5 rounded-full">{{ audit_entries|length }}</span>
    </a>
  </nav>
</div>

{# Tab Content #}
{% if active_tab == "overview" %}
<div class="bg-white rounded-xl border border-slate-200 shadow-sm p-5">
  <h4 class="text-sm font-semibold text-slate-900 mb-3">Service Configuration</h4>
  <pre class="json-display bg-slate-50 rounded-lg p-4 text-sm">{{ data|pretty_json }}</pre>
</div>

{% elif active_tab == "versions" %}
<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">Version</th>
        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Created By</th>
        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Checksum</th>
        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Created At</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-slate-200">
      {% for v in versions %}
      <tr>
        <td class="px-4 py-3 text-sm font-medium text-slate-900">v{{ v.version }}</td>
        <td class="px-4 py-3 text-xs font-mono text-slate-400">{{ v.created_by|truncate_id }}</td>
        <td class="px-4 py-3 text-xs font-mono text-slate-400">{{ v.checksum|truncate_id:12 }}</td>
        <td class="px-4 py-3 text-xs text-slate-400">{{ v.created_at|format_dt }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

{% elif active_tab == "sharing" %}
<div class="space-y-4">
  {# Current projections #}
  {% 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">Scope</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>
          {% if is_owner %}<th class="px-4 py-3 text-right text-xs font-medium text-slate-500 uppercase">Actions</th>{% endif %}
        </tr>
      </thead>
      <tbody class="divide-y divide-slate-200">
        {% for p in projections %}
        <tr>
          <td class="px-4 py-3 text-sm font-medium text-slate-700">{{ p.scope_name }}</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>
          {% if is_owner %}
          <td class="px-4 py-3 text-right">
            <form method="post" class="inline">
              {% csrf_token %}
              <input type="hidden" name="action" value="revoke_projection">
              <input type="hidden" name="scope_id" value="{{ p.scope_id }}">
              <button type="submit" class="text-xs text-red-600 hover:text-red-800">Revoke</button>
            </form>
          </td>
          {% endif %}
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% else %}
  <p class="text-sm text-slate-500">Not shared with any team.</p>
  {% endif %}

  {# Add projection (owner only) #}
  {% if is_owner and available_scopes %}
  <div class="bg-white rounded-xl border border-slate-200 shadow-sm p-5">
    <h4 class="text-sm font-semibold text-slate-900 mb-3">Share with a team</h4>
    <form method="post" class="flex items-center gap-3">
      {% csrf_token %}
      <input type="hidden" name="action" value="project">
      <select name="scope_id" class="rounded-lg border-slate-300 text-sm">
        {% for s in available_scopes %}
        <option value="{{ s.id }}">{{ s.name }}</option>
        {% endfor %}
      </select>
      <button type="submit" class="px-4 py-2 bg-brand-600 text-white text-sm font-medium rounded-lg hover:bg-brand-700">Share</button>
    </form>
  </div>
  {% endif %}
</div>

{% elif active_tab == "audit" %}
<div class="bg-white rounded-xl border border-slate-200 shadow-sm p-5">
  {% if audit_entries %}
    {% include "components/_timeline.html" with entries=audit_entries %}
  {% else %}
    <p class="text-sm text-slate-400 text-center py-6">No audit entries for this service.</p>
  {% endif %}
</div>
{% endif %}
{% endblock %}