{% extends "base.html" %}
{% block content %}
<section class="hero glass graph-hero">
  <div>
    <p class="eyebrow">TapDB Global DAG</p>
    <h1>Follow object lineage across active services.</h1>
    <p class="lede">
      Search by EUID or object metadata, then open a rooted TapDB DAG that expands through
      external identifier references into the next service.
    </p>
  </div>
</section>

<section class="grid graph-grid">
  <article class="panel glass graph-search-panel">
    <div class="panel-header">
      <div>
        <p class="eyebrow">Federated Search</p>
        <h2>Find a TapDB object</h2>
      </div>
      <span class="panel-kicker" data-graph-search-status>Idle</span>
    </div>
    <form class="graph-search-form" data-graph-search-form>
      <label>
        Text
        <input type="search" name="q" placeholder="name, EUID, category, type">
      </label>
      <label>
        EUID
        <input type="text" name="euid" placeholder="exact EUID">
      </label>
      <label>
        Service
        <input type="text" name="service_id" placeholder="optional service_id">
      </label>
      <label>
        Record Type
        <select name="record_type">
          <option value="all">all</option>
          <option value="template">template</option>
          <option value="instance">instance</option>
          <option value="lineage">lineage</option>
        </select>
      </label>
      <label>
        Category
        <input type="text" name="category" placeholder="optional">
      </label>
      <label>
        Type
        <input type="text" name="type" placeholder="optional">
      </label>
      <label>
        Tenant
        <input type="text" name="tenant_id" placeholder="optional tenant UUID">
      </label>
      <label>
        Relationship
        <input type="text" name="relationship_type" placeholder="optional lineage type">
      </label>
      <div class="graph-form-actions">
        <button type="submit">Search</button>
      </div>
    </form>
    <div class="graph-results" data-graph-search-results>
      <p class="card-note">Results from active fleet services appear here.</p>
    </div>
  </article>

  <article class="panel glass graph-controls-panel">
    <div class="panel-header">
      <div>
        <p class="eyebrow">Rooted DAG</p>
        <h2>Open by EUID</h2>
      </div>
      <span class="panel-kicker" data-graph-status>Waiting for a root EUID</span>
    </div>
    <form class="graph-open-form" data-graph-open-form>
      <label>
        Service
        <input type="text" name="service_id" placeholder="optional if EUID is unique">
      </label>
      <label>
        Start EUID
        <input type="text" name="start_euid" required placeholder="root EUID">
      </label>
      <label>
        Depth
        <input type="number" name="depth" min="0" max="10" value="4">
      </label>
      <label>
        External Jumps
        <input type="number" name="max_jumps" min="0" max="32" value="8">
      </label>
      <button type="submit">Open DAG</button>
    </form>
    <div class="graph-summary" data-graph-summary>
      No graph loaded.
    </div>
  </article>
</section>

<section class="panel glass graph-workspace">
  <div class="panel-header">
    <div>
      <p class="eyebrow">Composite DAG</p>
      <h2 data-graph-title>Global TapDB Graph</h2>
    </div>
    <span class="panel-kicker" data-graph-warning-summary>No warnings</span>
  </div>
  <div class="global-graph-shell">
    <div class="global-graph-stage">
      <div id="kahlo-global-graph" class="global-graph-canvas">
        <div class="topology-loading">Search for an object or enter a root EUID.</div>
      </div>
    </div>
    <aside class="topology-sidebar">
      <div class="topology-sidebar-panel">
        <h3>Selected Object</h3>
        <div data-graph-node-detail>
          <p class="lede">Select a node to inspect service, EUID, record type, and external references.</p>
        </div>
      </div>
      <div class="topology-sidebar-panel">
        <h3>Traversal Warnings</h3>
        <ul class="dashboard-notes" data-graph-warnings>
          <li>No traversal warnings.</li>
        </ul>
      </div>
    </aside>
  </div>
</section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.28.1/cytoscape.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dagre@0.8.5/dist/dagre.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cytoscape-dagre@2.5.0/cytoscape-dagre.min.js"></script>
{% endblock %}