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

{% block title %}Integrations{% endblock %}
{% block page_title %}Integrations{% endblock %}
{% block page_subtitle %}Plugins and external system connectors (Layer 12){% endblock %}
{% block layer_indicator %}L12 Integrations{% endblock %}

{% block content %}
{# Plugins Section #}
<div class="mb-8">
  <div class="flex justify-between items-center mb-4">
    <h2 class="text-lg font-semibold text-slate-900">Plugins</h2>
    <span class="text-sm text-slate-500">{{ plugins|length }} registered</span>
  </div>

  {% if plugins %}
  <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">Name</th>
          <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">State</th>
          <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Description</th>
          <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Owner</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-slate-200">
        {% for plugin in plugins %}
        <tr class="hover:bg-slate-50">
          <td class="px-4 py-3">
            <span class="text-sm font-medium text-slate-900">{{ plugin.name }}</span>
            <p class="text-xs font-mono text-slate-400 mt-0.5">{{ plugin.id|truncate_id }}</p>
          </td>
          <td class="px-4 py-3">
            <span class="text-sm font-mono text-slate-600">v{{ plugin.version }}</span>
          </td>
          <td class="px-4 py-3">
            {% include "components/_state_badge.html" with state=plugin.state %}
          </td>
          <td class="px-4 py-3 text-sm text-slate-500">{{ plugin.description|default:"--"|truncatewords:15 }}</td>
          <td class="px-4 py-3 text-xs font-mono text-slate-400">{{ plugin.owner_id|truncate_id }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% else %}
  {% include "components/_empty_state.html" with title="No plugins" message="No plugins have been registered. Plugins extend Scoped with custom behavior in sandboxed execution." %}
  {% endif %}
</div>

{# Integrations Section #}
<div>
  <div class="flex justify-between items-center mb-4">
    <h2 class="text-lg font-semibold text-slate-900">Integrations</h2>
    <span class="text-sm text-slate-500">{{ integrations|length }} configured</span>
  </div>

  {% if integrations %}
  <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">Name</th>
          <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Type</th>
          <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Description</th>
          <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Owner</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-slate-200">
        {% for integ in integrations %}
        <tr class="hover:bg-slate-50">
          <td class="px-4 py-3">
            <span class="text-sm font-medium text-slate-900">{{ integ.name }}</span>
            <p class="text-xs font-mono text-slate-400 mt-0.5">{{ integ.id|truncate_id }}</p>
          </td>
          <td class="px-4 py-3">
            <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">
              {{ integ.integration_type|default:"generic" }}
            </span>
          </td>
          <td class="px-4 py-3 text-sm text-slate-500">{{ integ.description|default:"--"|truncatewords:15 }}</td>
          <td class="px-4 py-3 text-xs font-mono text-slate-400">{{ integ.owner_id|truncate_id }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% else %}
  {% include "components/_empty_state.html" with title="No integrations" message="No external integrations have been configured. Integrations connect Scoped to external systems like CI/CD, monitoring, and messaging." %}
  {% endif %}
</div>
{% endblock %}