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

{% block title %}Connectors{% endblock %}
{% block page_title %}Connectors{% endblock %}
{% block page_subtitle %}Cross-org bridges and federation (Layer 13){% endblock %}
{% block layer_indicator %}L13 Connector{% endblock %}

{% block content %}
<div class="mb-6">
  <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 text-sm text-blue-800">
    <strong>What are Connectors?</strong>
    Connectors are cross-organization bridges that enable federated sharing between separate Scoped installations.
    Each connector defines a trust relationship with a remote organization, controlling what data flows
    in which direction.
  </div>
</div>

<div class="flex justify-between items-center mb-4">
  <span class="text-sm text-slate-500">{{ connectors|length }} connector{{ connectors|length|pluralize }}</span>
</div>

{% if connectors %}
<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">Remote Org</th>
        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Direction</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">Created</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-slate-200">
      {% for conn in connectors %}
      <tr class="hover:bg-slate-50">
        <td class="px-4 py-3">
          <span class="text-sm font-medium text-slate-900">{{ conn.name }}</span>
          <p class="text-xs font-mono text-slate-400 mt-0.5">{{ conn.id|truncate_id }}</p>
        </td>
        <td class="px-4 py-3 text-sm text-slate-600">{{ conn.remote_org|default:"--" }}</td>
        <td class="px-4 py-3">
          {% if conn.direction == "PUSH" %}
          <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">Push &rarr;</span>
          {% elif conn.direction == "PULL" %}
          <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">&larr; Pull</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">&harr; Bidirectional</span>
          {% endif %}
        </td>
        <td class="px-4 py-3">
          {% include "components/_state_badge.html" with state=conn.state %}
        </td>
        <td class="px-4 py-3 text-xs text-slate-400">{{ conn.created_at|format_dt }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% else %}
{% include "components/_empty_state.html" with title="No connectors" message="No cross-org bridges have been configured yet. Connectors enable federated sharing between Scoped installations." %}
{% endif %}
{% endblock %}