{# Single unified scan form. Save (project / region / dbt-only default)
   and run a scan on the chosen lookback in one submit — the only button
   is "Run scan". The page also surfaces the latest stats strip, an ADC
   pill, scan history, and quick links to the dashboard / settings. #}
{% extends "layout.html" %}

{% block content %}
<style>
  /* Running-state styling for the unified scan form. Tailwind's
     ``disabled:*`` variants aren't in this package's precompiled CSS,
     so we hand-roll the visuals. The HTML ``disabled`` attribute is what
     actually blocks interaction; the rules below just make it look right. */
  @keyframes audit-spin { to { transform: rotate(360deg); } }
  .audit-spin { animation: audit-spin 0.8s linear infinite; }
  .audit-scan-form input:disabled,
  .audit-scan-form select:disabled,
  .audit-scan-form button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
    background-color: rgb(241 245 249);
  }
  .dark .audit-scan-form input:disabled,
  .dark .audit-scan-form select:disabled,
  .dark .audit-scan-form button:disabled {
    background-color: rgb(15 23 42);
  }
  .audit-scan-form button:disabled {
    opacity: 0.7;
    background-color: inherit;
  }
  .audit-scan-form-locked-label {
    cursor: not-allowed;
    opacity: 0.6;
  }

  .audit-scan-form-grid {
    align-items: stretch;
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(0, 1fr);
  }

  .audit-scan-fields,
  .audit-query-preview {
    min-width: 0;
    width: 100%;
  }

  .audit-query-preview {
    position: relative;
  }

  .audit-query-preview-code-wrapper {
    position: relative;
  }

  .audit-query-copy-button {
    align-items: center;
    background: #fff;
    border: 1px solid #dbe3ef;
    color: #334155;
    display: inline-flex;
    gap: 0.35rem;
    height: 2rem;
    justify-content: center;
    line-height: 1;
    padding: 0 0.6rem;
    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
    z-index: 2;
  }

  /* Scroll bounds live directly on the code box — the only reliable
     way to make overflow-y kick in. height: <fixed>; overflow-y: auto.
     ~10rem keeps the panel about as tall as the four form fields. */
  .audit-query-preview-code {
    height: 10rem;
    overflow-x: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .audit-query-preview-code pre {
    margin: 0;
    min-width: max-content;
  }

  .audit-query-preview-code::-webkit-scrollbar {
    height: 12px;
    width: 12px;
  }

  .audit-query-preview-code::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border: 3px solid #fff;
  }

  .audit-query-preview-code::-webkit-scrollbar-track {
    background: #f8fafc;
  }

  @media (min-width: 1280px) {
    .audit-scan-form-grid {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
  }
</style>

<section class="ui-shell">
  <p class="ui-eyebrow">Setup</p>
  <div class="mt-3 flex items-center justify-between gap-4">
    <h1 class="ui-page-title mt-0">Configuration</h1>
    <span class="ui-pill {% if adc_state.ok %}ui-pill-success{% else %}ui-pill-warning{% endif %}">
      {{ adc_state.label }}
    </span>
  </div>

  <p class="mt-2 text-sm text-slate-500 dark:text-slate-400">
    GCP Project: <span class="text-slate-700 dark:text-slate-200 font-mono">{{ config.gcp_project_id }}</span>
    <span class="ml-3 text-slate-400 dark:text-slate-500">·</span>
    Region: <span class="text-slate-700 dark:text-slate-200 font-mono">{{ config.bigquery_region }}</span>
  </p>

  <div class="mt-4 flex flex-wrap gap-6 text-sm">
    <div>
      <span class="text-slate-400 dark:text-slate-500">Last scan:</span>
      <span class="ml-1 text-slate-600 dark:text-slate-300">{{ cache_stats.last_scan_at | timeago }}</span>
    </div>
  </div>

  <div class="mt-4 flex flex-wrap items-center gap-4">
    {% if has_scan_data %}
      <a href="/dashboard" class="ui-btn-primary transition-colors">View dashboard</a>
    {% endif %}
    <a href="/admin/settings" class="ui-btn-secondary transition-colors">Settings</a>
    {% if active_principal %}
      <span class="text-sm text-slate-400 dark:text-slate-500">
        Signed in as <code class="font-mono text-slate-600 dark:text-slate-300">{{ active_principal }}</code>
      </span>
    {% endif %}
  </div>

  {# Auto-refresh while a scan is in flight so the user sees the
     running → succeeded transition without having to reload manually.
     ``scan_in_progress`` is set by the route based on the most-recent
     ScanRun row's status; it drives both the meta refresh AND the
     form's disabled state below. #}
  {% if scan_in_progress %}
    <meta http-equiv="refresh" content="5">
  {% endif %}

  {% if scan_banner %}
    <div class="mt-4 border px-4 py-3 text-sm
      {% if scan_banner.level == 'success' %}
        border-emerald-300 dark:border-emerald-500/30 bg-emerald-50 dark:bg-emerald-950/40 text-emerald-700 dark:text-emerald-300
      {% elif scan_banner.level == 'warning' %}
        border-amber-300 dark:border-amber-500/30 bg-amber-50 dark:bg-amber-950/40 text-amber-700 dark:text-amber-300
      {% elif scan_banner.level == 'error' %}
        border-red-300 dark:border-red-500/30 bg-red-50 dark:bg-red-950/40 text-red-700 dark:text-red-300
      {% else %}
        border-slate-300 dark:border-slate-500/30 bg-slate-50 dark:bg-slate-950/40 text-slate-700 dark:text-slate-300
      {% endif %}">
      <div class="flex flex-wrap items-center justify-between gap-3">
        <div>
          <p class="font-semibold">{{ scan_banner.headline }}</p>
          {% if scan_banner.detail %}
            <p class="mt-1 text-sm whitespace-pre-line">{{ scan_banner.detail }}</p>
          {% endif %}
          {% if scan_in_progress %}
            <p class="mt-1 text-xs opacity-70">This page auto-refreshes every 5 seconds until the scan finishes.</p>
          {% endif %}
        </div>
        {% if scan_banner.level == 'success' and has_scan_data %}
          <a href="/dashboard" class="ui-btn-primary text-sm whitespace-nowrap">View dashboard</a>
        {% endif %}
      </div>
    </div>
  {% endif %}

  {% if errors and errors.get('_general') %}
    <div class="mt-4 border border-red-300 dark:border-red-500/30 bg-red-50 dark:bg-red-950/40 px-4 py-3 text-sm text-red-600 dark:text-red-300 whitespace-pre-line">
      {{ errors['_general'] }}
    </div>
  {% endif %}

  {# ── Unified Run-scan form: saves config + kicks off a scan ── #}
  <div class="mt-8 ui-pane">
    <form method="post" action="/admin/configurations" class="ui-form-scope audit-scan-form space-y-5">
      <div class="audit-scan-form-grid">
        <div class="audit-scan-fields space-y-5">
          <div>
            <label for="gcp_project_id" class="block text-sm font-medium text-slate-600 dark:text-slate-300">
              GCP Project
              {% if gcp_projects %}
                <span class="ml-2 text-sm font-normal text-slate-400 dark:text-slate-500">{{ gcp_projects | length }} accessible</span>
              {% endif %}
            </label>
            <input
              type="text"
              name="gcp_project_id"
              id="gcp_project_id"
              required
              autocomplete="off"
              list="gcp-project-options"
              value="{{ form_data.gcp_project_id if form_data else config.gcp_project_id }}"
              {% if scan_in_progress %}disabled{% endif %}
              class="mt-1 w-full border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 px-3 py-2 text-sm font-mono text-slate-900 dark:text-slate-100 focus:border-brand-500 focus:outline-hidden"
            />
            {% if gcp_projects %}
              <datalist id="gcp-project-options">
                {% for project in gcp_projects %}
                  <option value="{{ project.project_id }}">{% if project.display_name %}{{ project.display_name }} · {% endif %}{{ project.project_id }}</option>
                {% endfor %}
              </datalist>
            {% endif %}
            {% if errors and errors.get('gcp_project_id') %}
              <p class="mt-1 text-sm text-red-500 dark:text-red-400">{{ errors['gcp_project_id'] }}</p>
            {% endif %}
          </div>

          <div>
            <label for="bigquery_region" class="block text-sm font-medium text-slate-600 dark:text-slate-300">BigQuery Region</label>
            <input
              type="text"
              name="bigquery_region"
              id="bigquery_region"
              required
              autocomplete="off"
              list="bq-region-options"
              value="{{ form_data.bigquery_region if form_data else config.bigquery_region }}"
              placeholder="Type to filter…"
              {% if scan_in_progress %}disabled{% endif %}
              class="mt-1 w-full border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 px-3 py-2 text-sm font-mono text-slate-900 dark:text-slate-100 focus:border-brand-500 focus:outline-hidden"
            />
            {# Datalist behaves as a typeahead in every modern browser:
               the user sees the full list on focus, and typing narrows it. #}
            <datalist id="bq-region-options">
              {# Multi-regions #}
              <option value="us">us · multi-region (United States)</option>
              <option value="eu">eu · multi-region (European Union)</option>
              {# US #}
              <option value="us-central1">us-central1 · Iowa</option>
              <option value="us-east1">us-east1 · South Carolina</option>
              <option value="us-east4">us-east4 · Northern Virginia</option>
              <option value="us-east5">us-east5 · Columbus</option>
              <option value="us-south1">us-south1 · Dallas</option>
              <option value="us-west1">us-west1 · Oregon</option>
              <option value="us-west2">us-west2 · Los Angeles</option>
              <option value="us-west3">us-west3 · Salt Lake City</option>
              <option value="us-west4">us-west4 · Las Vegas</option>
              {# North + South America #}
              <option value="northamerica-northeast1">northamerica-northeast1 · Montréal</option>
              <option value="northamerica-northeast2">northamerica-northeast2 · Toronto</option>
              <option value="northamerica-south1">northamerica-south1 · Querétaro</option>
              <option value="southamerica-east1">southamerica-east1 · São Paulo</option>
              <option value="southamerica-west1">southamerica-west1 · Santiago</option>
              {# Europe #}
              <option value="europe-central2">europe-central2 · Warsaw</option>
              <option value="europe-north1">europe-north1 · Finland</option>
              <option value="europe-north2">europe-north2 · Stockholm</option>
              <option value="europe-southwest1">europe-southwest1 · Madrid</option>
              <option value="europe-west1">europe-west1 · Belgium</option>
              <option value="europe-west2">europe-west2 · London</option>
              <option value="europe-west3">europe-west3 · Frankfurt</option>
              <option value="europe-west4">europe-west4 · Netherlands</option>
              <option value="europe-west6">europe-west6 · Zürich</option>
              <option value="europe-west8">europe-west8 · Milan</option>
              <option value="europe-west9">europe-west9 · Paris</option>
              <option value="europe-west10">europe-west10 · Berlin</option>
              <option value="europe-west12">europe-west12 · Turin</option>
              {# Middle East + Africa #}
              <option value="me-central1">me-central1 · Doha</option>
              <option value="me-central2">me-central2 · Dammam</option>
              <option value="me-west1">me-west1 · Tel Aviv</option>
              <option value="africa-south1">africa-south1 · Johannesburg</option>
              {# Asia #}
              <option value="asia-east1">asia-east1 · Taiwan</option>
              <option value="asia-east2">asia-east2 · Hong Kong</option>
              <option value="asia-northeast1">asia-northeast1 · Tokyo</option>
              <option value="asia-northeast2">asia-northeast2 · Osaka</option>
              <option value="asia-northeast3">asia-northeast3 · Seoul</option>
              <option value="asia-south1">asia-south1 · Mumbai</option>
              <option value="asia-south2">asia-south2 · Delhi</option>
              <option value="asia-southeast1">asia-southeast1 · Singapore</option>
              <option value="asia-southeast2">asia-southeast2 · Jakarta</option>
              {# Oceania #}
              <option value="australia-southeast1">australia-southeast1 · Sydney</option>
              <option value="australia-southeast2">australia-southeast2 · Melbourne</option>
            </datalist>
            {% if errors and errors.get('bigquery_region') %}
              <p class="mt-1 text-sm text-red-500 dark:text-red-400">{{ errors['bigquery_region'] }}</p>
            {% endif %}
          </div>

          <div>
            <label for="scan-days" class="block text-sm font-medium text-slate-600 dark:text-slate-300">Period</label>
            <select
              name="days"
              id="scan-days"
              {% if scan_in_progress %}disabled{% endif %}
              class="mt-1 w-full border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 focus:border-brand-500 focus:outline-hidden"
            >
              {% for d in allowed_scan_days %}
                <option value="{{ d }}" {% if d == default_scan_days %}selected{% endif %}>
                  {% if d == 1 %}Last 24 hours
                  {% elif d == 7 %}Last 7 days
                  {% elif d == 30 %}Last 30 days
                  {% elif d == 180 %}Last 180 days (max)
                  {% else %}Last {{ d }} days{% endif %}
                </option>
              {% endfor %}
            </select>
          </div>

          <div class="flex items-start gap-2">
            <input
              type="checkbox"
              name="dbt_only_default"
              id="dbt_only_default"
              {% if (form_data.dbt_only_default if form_data else config.scan_defaults.dbt_only) %}checked{% endif %}
              {% if scan_in_progress %}disabled{% endif %}
              class="mt-0.5"
            />
            <label for="dbt_only_default" class="text-sm text-slate-700 dark:text-slate-300 {% if scan_in_progress %}audit-scan-form-locked-label{% endif %}">
              Default to dbt-only scans
            </label>
          </div>
        </div>

        <details class="audit-query-preview border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-950/40 p-4" open>
          <summary class="cursor-pointer select-none text-sm font-semibold text-slate-700 dark:text-slate-200">
            BigQuery query preview
          </summary>
          <div class="audit-query-preview-body">
            <div class="mt-3 flex gap-2 border-b border-slate-200 dark:border-slate-800 text-sm">
              <button type="button" data-query-tab="jobs" class="border-b-2 border-brand-500 px-2 pb-2 font-semibold text-brand-600 dark:text-brand-300">Jobs</button>
              <button type="button" data-query-tab="columns" class="border-b-2 border-transparent px-2 pb-2 font-semibold text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200">Columns</button>
              <button type="button" data-query-tab="storage" class="border-b-2 border-transparent px-2 pb-2 font-semibold text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200">Storage</button>
            </div>
            <div class="audit-query-preview-code-wrapper mt-3">
              <button type="button" id="copy-scan-query" class="audit-query-copy-button text-sm hover:border-brand-500 hover:text-brand-500" title="Copy SQL" aria-label="Copy SQL">
                <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M8 7.5A2.5 2.5 0 0110.5 5h6A2.5 2.5 0 0119 7.5v9A2.5 2.5 0 0116.5 19h-6A2.5 2.5 0 018 16.5v-9z" />
                  <path stroke-linecap="round" stroke-linejoin="round" d="M6 15.5H5.5A2.5 2.5 0 013 13V4.5A2.5 2.5 0 015.5 2h6A2.5 2.5 0 0114 4.5V5" />
                </svg>
                <span id="copy-scan-query-label">Copy</span>
              </button>
              <div class="audit-query-preview-code border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-950">
                <pre class="p-4 text-sm leading-relaxed text-slate-800 dark:text-slate-100"><code id="scan-query-preview">{{ scan_query_preview.sql }}</code></pre>
              </div>
            </div>
          </div>
        </details>
      </div>

      <div class="flex items-center gap-3 pt-1">
        {% if scan_in_progress %}
          <button type="submit" class="ui-btn-primary transition-colors inline-flex items-center gap-2" disabled aria-busy="true">
            <svg class="h-4 w-4 audit-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
            </svg>
            <span>Scanning…</span>
          </button>
        {% else %}
          <button type="submit" class="ui-btn-primary transition-colors"
                  onclick="this.disabled=true; this.innerText='Scanning…'; this.form.submit();">
            Run scan
          </button>
        {% endif %}
      </div>
    </form>
  </div>

  <script>
    (function() {
      var projectInput = document.getElementById('gcp_project_id');
      var regionInput = document.getElementById('bigquery_region');
      var daysInput = document.getElementById('scan-days');
      var dbtOnlyInput = document.getElementById('dbt_only_default');
      var queryEl = document.getElementById('scan-query-preview');
      var copyButton = document.getElementById('copy-scan-query');
      var copyLabel = document.getElementById('copy-scan-query-label');
      var tabButtons = Array.prototype.slice.call(document.querySelectorAll('[data-query-tab]'));
      var activeTab = 'jobs';
      if (!projectInput || !regionInput || !daysInput || !dbtOnlyInput || !queryEl) return;

      function isoDaysAgo(days) {
        var date = new Date();
        date.setUTCDate(date.getUTCDate() - days);
        return date.toISOString();
      }

      function renderJobsSql(projectId, region, dbtOnly, windowStart, windowEnd) {
        var whereExtra = dbtOnly ? "\n          AND STARTS_WITH(query, @dbt_prefix)" : "";
        return [
          "SELECT",
          "    job_id,",
          "    user_email,",
          "    query,",
          "    creation_time,",
          "    start_time,",
          "    end_time,",
          "    total_slot_ms,",
          "    total_bytes_processed,",
          "    total_bytes_billed,",
          "    destination_table,",
          "    referenced_tables,",
          "    statement_type,",
          "    cache_hit,",
          "    error_result,",
          "    state,",
          "    total_modified_partitions,",
          "    labels,",
          "    query_info.performance_insights AS performance_insights,",
          "    query_info.query_hashes AS query_hashes,",
          "    timeline",
          "FROM `" + projectId + ".region-" + region + "`.INFORMATION_SCHEMA.JOBS_BY_PROJECT",
          "WHERE creation_time BETWEEN TIMESTAMP(\"" + windowStart + "\") AND TIMESTAMP(\"" + windowEnd + "\")",
          "  AND job_type = 'QUERY'",
          "  AND state = 'DONE'",
          "  AND statement_type IS NOT NULL",
          "  AND statement_type != 'SCRIPT'",
          "  AND error_result IS NULL" + whereExtra,
          "ORDER BY creation_time DESC"
        ].join("\n");
      }

      function renderColumnsSql(projectId, region) {
        return [
          "SELECT",
          "    table_schema AS dataset_name,",
          "    table_name,",
          "    column_name,",
          "    data_type,",
          "    ordinal_position",
          "FROM `" + projectId + "`.`region-" + region + "`.INFORMATION_SCHEMA.COLUMNS",
          "WHERE NOT STARTS_WITH(table_schema, '_')"
        ].join("\n");
      }

      function renderStorageSql(projectId, region) {
        var tableStorage = [
          "SELECT",
          "    project_id,",
          "    table_schema,",
          "    table_name,",
          "    creation_time,",
          "    table_type,",
          "    total_rows,",
          "    total_partitions,",
          "    total_logical_bytes,",
          "    active_logical_bytes,",
          "    long_term_logical_bytes,",
          "    total_physical_bytes,",
          "    active_physical_bytes,",
          "    long_term_physical_bytes,",
          "    time_travel_physical_bytes,",
          "    fail_safe_physical_bytes",
          "FROM `" + projectId + "`.`region-" + region + "`.INFORMATION_SCHEMA.TABLE_STORAGE",
          "WHERE deleted = false",
          "  AND table_type IN ('BASE TABLE', 'MATERIALIZED VIEW')"
        ].join("\n");
        var schemataOptions = [
          "SELECT",
          "    schema_name,",
          "    option_value AS billing_model",
          "FROM `" + projectId + "`.`region-" + region + "`.INFORMATION_SCHEMA.SCHEMATA_OPTIONS",
          "WHERE option_name = 'storage_billing_model'"
        ].join("\n");
        return tableStorage + "\n\n-- Plus a per-dataset billing-model lookup:\n\n" + schemataOptions;
      }

      function setActiveTab(tab) {
        activeTab = tab;
        tabButtons.forEach(function(button) {
          var isActive = button.getAttribute('data-query-tab') === tab;
          button.classList.toggle('border-brand-500', isActive);
          button.classList.toggle('text-brand-600', isActive);
          button.classList.toggle('dark:text-brand-300', isActive);
          button.classList.toggle('border-transparent', !isActive);
          button.classList.toggle('text-slate-500', !isActive);
          button.classList.toggle('dark:text-slate-400', !isActive);
        });
        refreshPreview();
      }

      function refreshPreview() {
        var days = parseInt(daysInput.value || "30", 10);
        var projectId = (projectInput.value || "{{ config.gcp_project_id }}").trim();
        var region = (regionInput.value || "{{ config.bigquery_region }}").trim();
        var dbtOnly = dbtOnlyInput.checked;
        var windowStart = isoDaysAgo(days);
        var windowEnd = new Date().toISOString();
        if (activeTab === 'columns') {
          queryEl.textContent = renderColumnsSql(projectId, region);
        } else if (activeTab === 'storage') {
          queryEl.textContent = renderStorageSql(projectId, region);
        } else {
          queryEl.textContent = renderJobsSql(projectId, region, dbtOnly, windowStart, windowEnd);
        }
      }

      tabButtons.forEach(function(button) {
        button.addEventListener('click', function() {
          setActiveTab(button.getAttribute('data-query-tab') || 'jobs');
        });
      });
      [projectInput, regionInput, daysInput, dbtOnlyInput].forEach(function(input) {
        input.addEventListener('input', refreshPreview);
        input.addEventListener('change', refreshPreview);
      });
      function writeClipboard(text, done) {
        if (navigator.clipboard && window.isSecureContext) {
          navigator.clipboard.writeText(text).then(done).catch(function() {
            fallbackCopy(text, done);
          });
          return;
        }
        fallbackCopy(text, done);
      }

      function fallbackCopy(text, done) {
        var textarea = document.createElement('textarea');
        textarea.value = text;
        textarea.setAttribute('readonly', '');
        textarea.style.position = 'fixed';
        textarea.style.left = '-9999px';
        document.body.appendChild(textarea);
        textarea.select();
        try {
          document.execCommand('copy');
          done();
        } finally {
          document.body.removeChild(textarea);
        }
      }

      if (copyButton) {
        copyButton.addEventListener('click', function() {
          writeClipboard(queryEl.textContent || "", function() {
            if (copyLabel) copyLabel.textContent = "Copied";
            window.setTimeout(function() {
              if (copyLabel) copyLabel.textContent = "Copy";
            }, 1200);
          });
        });
      }
      refreshPreview();
    })();
  </script>

  {# ── Scan history ── #}
  <div class="mt-8 ui-pane">
    <div class="flex items-baseline justify-between mb-4">
      <h2 class="ui-section-title">Scan history</h2>
      <p class="ui-card-meta">{{ scans | length }} most recent</p>
    </div>
    {% if scans %}
    <div class="ui-table-wrap">
      <table class="ui-table">
        <thead>
          <tr class="ui-table-head-row">
            <th class="ui-table-th ui-table-th-left">Started</th>
            <th class="ui-table-th ui-table-th-left">Status</th>
            <th class="ui-table-th ui-table-th-right">Lookback</th>
            <th class="ui-table-th ui-table-th-right">Jobs</th>
            <th class="ui-table-th ui-table-th-right">Cost</th>
            <th class="ui-table-th ui-table-th-left">dbt-only</th>
          </tr>
        </thead>
        <tbody>
          {% for scan in scans %}
          <tr class="ui-table-row">
            <td class="ui-table-td whitespace-nowrap font-mono text-sm">{{ scan.started_at.strftime("%Y-%m-%d %H:%M") }} UTC</td>
            <td class="ui-table-td">
              {% if scan.status == "succeeded" %}
                <span class="ui-pill ui-pill-success">succeeded</span>
              {% elif scan.status == "failed" %}
                <span class="ui-pill ui-pill-danger" title="{{ scan.failure_reason }}">failed</span>
              {% elif scan.status == "running" %}
                <span class="ui-pill ui-pill-blue">running</span>
              {% else %}
                <span class="ui-pill ui-pill-neutral">{{ scan.status }}</span>
              {% endif %}
            </td>
            <td class="ui-table-td ui-table-td-right">{{ scan.requested_lookback_days }}d</td>
            <td class="ui-table-td ui-table-td-right font-mono">{{ "{:,}".format(scan.fetched_job_count) }}</td>
            <td class="ui-table-td ui-table-td-right font-mono">
              {{ (scan.actual_cost_usd or scan.estimated_cost_usd) | format_usd }}
            </td>
            <td class="ui-table-td">
              {% if scan.dbt_only_filter %}
                <span class="ui-pill ui-pill-success">on</span>
              {% else %}
                <span class="text-slate-400 dark:text-slate-600">—</span>
              {% endif %}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}
      <p class="text-sm text-slate-500 dark:text-slate-400 py-4 text-center">
        No scans yet. Use the form above to run your first scan.
      </p>
    {% endif %}
  </div>

</section>
{% endblock %}