{% extends "base.html" %}
{% block title %}Connectors — TraceBi{% endblock %}

{% block content %}
<div class="page-title">Connectors</div>
<p class="page-sub">Registered data source connectors available to this TraceBi instance.</p>

{% if connectors %}
<div class="card">
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Type</th>
        <th>Details</th>
      </tr>
    </thead>
    <tbody>
      {% for c in connectors %}
      <tr>
        <td><strong>{{ c.name }}</strong></td>
        <td><span class="badge badge-blue">{{ c.type }}</span></td>
        <td style="color:var(--muted);">
          {% if c.tables is defined %}
            Tables: {{ c.tables | join(', ') }}
          {% elif c.directory is defined %}
            Directory: <code>{{ c.directory }}</code>
          {% elif c.url is defined %}
            URL: <code>{{ c.url }}</code>
          {% else %}
            —
          {% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<div class="card">
  <div class="card-title">Adding a Connector</div>
  <p style="color:var(--muted); margin-bottom:12px; line-height:1.7;">
    Register connectors in your app module and they'll appear here automatically.
  </p>
  <div class="code-block">
<span style="color:#7dcfff">from</span> tracebi <span style="color:#7dcfff">import</span> CSVConnector, SQLConnector<br>
<span style="color:#7dcfff">from</span> web.api.registry <span style="color:#7dcfff">import</span> registry<br>
<br>
connector = CSVConnector(<span style="color:#9ece6a">"sales"</span>, directory=<span style="color:#9ece6a">"data/"</span>)<br>
registry.add_connector(connector)
  </div>
</div>

{% else %}
<div class="card">
  <div class="empty">
    <div class="empty-icon">⇌</div>
    <p>No connectors registered yet.</p>
    <p style="margin-top:8px;">Add connectors in <code>web/demo_app.py</code> or your own app module.</p>
  </div>
</div>
{% endif %}
{% endblock %}