<!-- Pipeline Overview Tab: extraction status, serving freshness, landing zone
     Self-polls every 5s while any extraction task is pending, stops when quiet. -->

<div id="pipeline-overview-content"
     hx-get="{{ url_for('pipeline.pipeline_overview') }}"
     hx-target="this"
     hx-swap="outerHTML"
     {% if any_running %}hx-trigger="every 5s"{% endif %}>

<!-- Extraction Status Grid -->
<div class="card mb-4">
  <p class="card-header">Extraction Status</p>
  {% if workflow_rows %}
  <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:0.75rem">
    {% for row in workflow_rows %}
    {% set wf = row.workflow %}
    {% set run = row.run %}
    {% set stale = row.stale %}
    {% set is_running = run and run.status == 'running' and not stale %}
    <div style="border:1px solid {% if is_running %}#93C5FD{% else %}#E2E8F0{% endif %};border-radius:10px;padding:0.875rem;background:{% if is_running %}#EFF6FF{% else %}#FAFAFA{% endif %}">
      <div class="flex items-center gap-2 mb-1">
        {% if not run %}
          <span class="status-dot pending"></span>
        {% elif stale %}
          <span class="status-dot stale"></span>
        {% elif run.status == 'success' %}
          <span class="status-dot ok"></span>
        {% elif run.status == 'failed' %}
          <span class="status-dot failed"></span>
        {% else %}
          <span class="status-dot running"></span>
        {% endif %}
        <span class="text-sm font-semibold text-navy">{{ wf.name }}</span>
        {% if stale %}
        <span class="badge-warning" style="font-size:10px;padding:1px 6px;margin-left:auto">stale</span>
        {% endif %}
        {% if is_running %}
        <span class="btn btn-sm ml-auto"
              style="padding:2px 8px;font-size:11px;opacity:0.6;cursor:default;pointer-events:none">
          <svg class="spinner-icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
            <path d="M12 2a10 10 0 0 1 10 10" stroke-linecap="round"/>
          </svg>
          Running
        </span>
        {% else %}
        <button type="button"
                class="btn btn-sm ml-auto"
                style="padding:2px 8px;font-size:11px"
                hx-post="{{ url_for('pipeline.pipeline_trigger_extract') }}"
                hx-target="#pipeline-overview-content"
                hx-swap="outerHTML"
                hx-vals='{"extractor": "{{ wf.name }}", "csrf_token": "{{ csrf_token() }}"}'
                hx-confirm="Run {{ wf.name }} extractor?">Run</button>
        {% endif %}
      </div>
      {% if wf.description %}
      <p class="text-xs text-slate" style="margin-top:2px;margin-bottom:4px">{{ wf.description }}</p>
      {% endif %}
      <p class="text-xs text-slate">{{ wf.schedule_label }}</p>
      {% if is_running %}
        <p class="text-xs mt-1" style="color:#2563EB">
          Started {{ run.started_at[:16].replace('T', ' ') if run.started_at else '—' }} — running...
        </p>
      {% elif run %}
        <p class="text-xs mono text-slate-dark mt-1">{{ run.started_at[:16].replace('T', ' ') if run.started_at else '—' }}</p>
        {% if run.status == 'failed' and run.error_message %}
        <p class="text-xs text-danger mt-1" style="font-family:monospace;word-break:break-all">
          {{ run.error_message[:80] }}{% if run.error_message|length > 80 %}…{% endif %}
        </p>
        {% endif %}
        {% if run.files_written %}
        <p class="text-xs text-slate mt-1">{{ run.files_written }} file{{ 's' if run.files_written != 1 }},
          {{ "{:,}".format(run.bytes_written or 0) }} B</p>
        {% endif %}
      {% else %}
        <p class="text-xs text-slate mt-1">No runs yet</p>
      {% endif %}
    </div>
    {% endfor %}
  </div>
  {% else %}
  <p class="text-sm text-slate">No workflows found. Check that <code>infra/supervisor/workflows.toml</code> exists.</p>
  {% endif %}
</div>

<!-- Two-column row: Serving Freshness + Landing Zone -->
<div class="pipeline-two-col">

  <!-- Serving Freshness -->
  <div class="card">
    <p class="card-header">Serving Tables</p>
    {% if last_export %}
    <p class="text-xs text-slate mb-3">
      Last export: <span class="mono font-semibold text-navy">{{ last_export }}</span>
    </p>
    {% endif %}
    {% if serving_tables %}
    <div style="overflow-x:auto">
    <table class="table" style="font-size:0.8125rem">
      <thead>
        <tr>
          <th>Table</th>
          <th style="text-align:right">Rows</th>
        </tr>
      </thead>
      <tbody>
        {% for t in serving_tables %}
        <tr>
          <td class="mono">serving.{{ t.name }}</td>
          <td class="mono text-right font-semibold">
            {% if t.row_count is not none %}{{ "{:,}".format(t.row_count) }}{% else %}—{% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    </div>
    {% else %}
    <p class="text-sm text-slate">No serving tables found — run the pipeline first.</p>
    {% endif %}
  </div>

  <!-- Landing Zone -->
  <div class="card">
    <p class="card-header">Landing Zone
      <span class="text-xs font-normal text-slate ml-2">
        Total: <span class="font-semibold">{{ format_bytes(total_landing_bytes) }}</span>
      </span>
    </p>
    {% if landing_stats %}
    <div style="overflow-x:auto">
    <table class="table" style="font-size:0.8125rem">
      <thead>
        <tr>
          <th>Source</th>
          <th style="text-align:right">Files</th>
          <th style="text-align:right">Size</th>
          <th style="text-align:right">Latest</th>
        </tr>
      </thead>
      <tbody>
        {% for s in landing_stats %}
        <tr>
          <td class="mono">{{ s.name }}</td>
          <td class="text-right text-slate">{{ s.file_count }}</td>
          <td class="text-right font-semibold">{{ format_bytes(s.total_bytes) }}</td>
          <td class="text-right mono text-xs text-slate">{{ s.latest_mtime or '—' }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    </div>
    {% else %}
    <p class="text-sm text-slate">
      Landing zone empty or not found at <code>data/landing</code>.
    </p>
    {% endif %}
  </div>

</div>

</div>{# end #pipeline-overview-content #}
