{% extends "base.html" %}
{% block content %}
<section class="page-head">
  <h1>Lineage</h1>
  <p class="lede">Feature-table-only graph, clustered by entity. Click a box to open its page; type a name to focus its 1-hop neighborhood.</p>
</section>

{% if not catalog.feature_groups %}
<section class="empty">
  <h2>Nothing to graph yet</h2>
  <p>Mark dbt models as feature tables to see them appear here.</p>
</section>
{% else %}

<section class="lineage-controls" aria-label="Lineage controls">
  <div class="lineage-search">
    <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
      <circle cx="7" cy="7" r="4.5"/>
      <path d="m13 13-2.5-2.5"/>
    </svg>
    <input id="lineage-search" type="search" placeholder="Focus a node — e.g. customer_features_daily" autocomplete="off">
    <button type="button" class="link-btn" id="lineage-clear" hidden>Clear focus</button>
  </div>
  <div class="lineage-legend">
    <span><span class="legend-dot" style="background:#79c0ff"></span> entity cluster</span>
    <span><span class="legend-dot" style="background:#6ec78a"></span> click any node →</span>
  </div>
</section>

<section class="lineage-graph">
  <div id="mermaid-host"></div>
  {# Source kept in a <template> so we can re-render with new theme variables
     when the user toggles dark/light mode without re-fetching the page. #}
  <template id="mermaid-source"><pre class="mermaid">{{ mermaid_source }}</pre></template>
  <noscript>
    <p class="muted">Lineage graph requires JavaScript. Source:</p>
    <pre><code>{{ mermaid_source }}</code></pre>
  </noscript>
</section>

{% endif %}
{% endblock %}

{% block scripts %}
{# Mermaid is bundled locally (see THIRD_PARTY_LICENSES.md). The catalog
   works offline, behind strict CSPs, and in air-gapped environments. #}
<script src="{{ base_url }}/static/mermaid.min.js"></script>
<script src="{{ base_url }}/static/lineage.js" defer></script>
{% endblock %}