<!-- Pipeline Transform Tab: SQLMesh + export status, run history
     Self-polls every 5s while any transform/export task is pending. -->

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

<!-- Status Cards: Transform + Export -->
<div class="pipeline-two-col mb-4">

  <!-- SQLMesh Transform -->
  {% set tx = latest['run_transform'] %}
  <div class="card">
    <p class="card-header">SQLMesh Transform</p>
    <div class="flex items-center gap-2 mb-3">
      {% if tx is none %}
        <span class="status-dot pending"></span>
        <span class="text-sm text-slate">Never run</span>
      {% elif tx.status == 'pending' %}
        <span class="status-dot running"></span>
        <span class="text-sm text-slate">Running…</span>
      {% elif tx.status == 'complete' %}
        <span class="status-dot ok"></span>
        <span class="text-sm text-slate">Complete</span>
      {% else %}
        <span class="status-dot failed"></span>
        <span class="text-sm text-danger">Failed</span>
      {% endif %}
    </div>
    {% if tx %}
    <p class="text-xs text-slate mono">
      Started: {{ (tx.created_at or '')[:19] or '—' }}
    </p>
    {% if tx.completed_at %}
    <p class="text-xs text-slate mono">
      Finished: {{ tx.completed_at[:19] }}
    </p>
    {% endif %}
    {% if tx.status == 'failed' and tx.error %}
    <details class="mt-2">
      <summary class="text-xs text-danger cursor-pointer">Error</summary>
      <pre class="text-xs mt-1 p-2 bg-gray-50 rounded overflow-auto" style="max-height:8rem;white-space:pre-wrap">{{ tx.error[:400] }}</pre>
    </details>
    {% endif %}
    {% endif %}
    <div class="mt-3">
      <button type="button"
              class="btn btn-sm"
              {% if any_running %}disabled{% endif %}
              hx-post="{{ url_for('pipeline.pipeline_trigger_transform') }}"
              hx-target="#pipeline-transform-content"
              hx-swap="outerHTML"
              hx-vals='{"step": "transform", "csrf_token": "{{ csrf_token() }}"}'
              hx-confirm="Run SQLMesh transform (prod --auto-apply)?">
        Run Transform
      </button>
    </div>
  </div>

  <!-- Export Serving -->
  {% set ex = latest['run_export'] %}
  <div class="card">
    <p class="card-header">Export Serving</p>
    <div class="flex items-center gap-2 mb-3">
      {% if ex is none %}
        <span class="status-dot pending"></span>
        <span class="text-sm text-slate">Never run</span>
      {% elif ex.status == 'pending' %}
        <span class="status-dot running"></span>
        <span class="text-sm text-slate">Running…</span>
      {% elif ex.status == 'complete' %}
        <span class="status-dot ok"></span>
        <span class="text-sm text-slate">Complete</span>
      {% else %}
        <span class="status-dot failed"></span>
        <span class="text-sm text-danger">Failed</span>
      {% endif %}
    </div>
    {% if ex %}
    <p class="text-xs text-slate mono">
      Started: {{ (ex.created_at or '')[:19] or '—' }}
    </p>
    {% if ex.completed_at %}
    <p class="text-xs text-slate mono">
      Finished: {{ ex.completed_at[:19] }}
    </p>
    {% endif %}
    {% if serving_meta %}
    <p class="text-xs text-slate mt-1">
      Last export: <span class="font-semibold mono">{{ (serving_meta.exported_at_utc or '')[:19].replace('T', ' ') or '—' }}</span>
    </p>
    {% endif %}
    {% if ex.status == 'failed' and ex.error %}
    <details class="mt-2">
      <summary class="text-xs text-danger cursor-pointer">Error</summary>
      <pre class="text-xs mt-1 p-2 bg-gray-50 rounded overflow-auto" style="max-height:8rem;white-space:pre-wrap">{{ ex.error[:400] }}</pre>
    </details>
    {% endif %}
    {% endif %}
    <div class="mt-3">
      <button type="button"
              class="btn btn-sm"
              {% if any_running %}disabled{% endif %}
              hx-post="{{ url_for('pipeline.pipeline_trigger_transform') }}"
              hx-target="#pipeline-transform-content"
              hx-swap="outerHTML"
              hx-vals='{"step": "export", "csrf_token": "{{ csrf_token() }}"}'
              hx-confirm="Export serving tables (lakehouse → analytics.duckdb)?">
        Run Export
      </button>
    </div>
  </div>

</div>

<!-- Run Full Pipeline -->
{% set pl = latest['run_pipeline'] %}
<div class="card mb-4">
  <div class="flex items-center justify-between flex-wrap gap-3">
    <div>
      <p class="font-semibold text-navy text-sm">Full Pipeline</p>
      <p class="text-xs text-slate mt-1">Runs extract → transform → export sequentially</p>
      {% if pl %}
      <p class="text-xs text-slate mono mt-1">
        Last: {{ (pl.created_at or '')[:19] or '—' }}
        {% if pl.status == 'complete' %}<span class="badge-success ml-2">Complete</span>{% endif %}
        {% if pl.status == 'pending' %}<span class="badge-warning ml-2">Running…</span>{% endif %}
        {% if pl.status == 'failed' %}<span class="badge-danger ml-2">Failed</span>{% endif %}
      </p>
      {% endif %}
    </div>
    <button type="button"
            class="btn btn-sm"
            {% if any_running %}disabled{% endif %}
            hx-post="{{ url_for('pipeline.pipeline_trigger_transform') }}"
            hx-target="#pipeline-transform-content"
            hx-swap="outerHTML"
            hx-vals='{"step": "pipeline", "csrf_token": "{{ csrf_token() }}"}'
            hx-confirm="Run full ELT pipeline (extract → transform → export)?">
      Run Full Pipeline
    </button>
  </div>
</div>

<!-- Recent Runs -->
<div class="card">
  <p class="card-header">Recent Runs</p>
  {% if history %}
  <div style="overflow-x:auto">
  <table class="table" style="font-size:0.8125rem">
    <thead>
      <tr>
        <th>#</th>
        <th>Step</th>
        <th>Started</th>
        <th>Duration</th>
        <th>Status</th>
        <th>Error</th>
      </tr>
    </thead>
    <tbody>
      {% for row in history %}
      <tr>
        <td class="text-xs text-slate">{{ row.id }}</td>
        <td class="mono text-xs">{{ row.task_name | replace('run_', '') }}</td>
        <td class="mono text-xs text-slate">{{ (row.created_at or '')[:19] or '—' }}</td>
        <td class="mono text-xs text-slate">{{ row.duration or '—' }}</td>
        <td>
          {% if row.status == 'complete' %}
            <span class="badge-success">Complete</span>
          {% elif row.status == 'failed' %}
            <span class="badge-danger">Failed</span>
          {% else %}
            <span class="badge-warning">Running…</span>
          {% endif %}
        </td>
        <td>
          {% if row.error_short %}
          <details>
            <summary class="text-xs text-danger cursor-pointer">Error</summary>
            <pre class="text-xs mt-1 p-2 bg-gray-50 rounded overflow-auto" style="max-width:24rem;white-space:pre-wrap">{{ row.error_short }}</pre>
          </details>
          {% else %}—{% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  </div>
  {% else %}
  <p class="text-sm text-slate">No transform runs yet.</p>
  {% endif %}
</div>

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