{% macro status_badge(status) -%}
{%- set key = status or "unknown" -%}
{%- if key == "failed" -%}
<span data-status-badge class="inline-flex items-center rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-800">{{ key }}</span>
{%- elif key == "success" -%}
<span data-status-badge class="inline-flex items-center rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-medium text-emerald-800">{{ key }}</span>
{%- else -%}
<span data-status-badge class="inline-flex items-center rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-800">{{ key }}</span>
{%- endif -%}
{%- endmacro %}

{% if manifest %}
  {% set status_key = manifest.status or "unknown" %}
  {% set is_stale = staleness.is_stale %}
  {% set card_tone = "border-red-300 bg-red-50" if status_key == "failed" else "border-emerald-300 bg-emerald-50" if status_key == "success" and is_stale == false else "border-amber-300 bg-amber-50" %}
  <h3 class="text-sm font-medium text-slate-800 mb-2">Latest run</h3>
  <div
    class="rounded-lg border p-4 mb-4 {{ card_tone }}"
    data-latest-run
    data-run-status="{{ status_key }}"
    data-run-stale="{{ 'true' if is_stale else ('unknown' if is_stale is none else 'false') }}"
    data-run-generated="{{ manifest.generated_at or '' }}"
  >
    <div class="flex flex-wrap items-center justify-between gap-2">
      <div class="flex flex-wrap items-center gap-2">
        {{ status_badge(status_key) }}
        {% if is_stale %}
        <span data-status-badge class="inline-flex items-center rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-800">stale</span>
        {% endif %}
      </div>
      <time
        class="text-sm text-slate-600"
        datetime="{{ manifest.generated_at }}"
        data-controller="time-ago"
        data-time-ago-value="{{ manifest.generated_at }}"
      >{{ manifest.generated_at }}</time>
    </div>
    <dl class="mt-3 grid grid-cols-2 gap-2 text-sm text-slate-700">
      <div><dt class="text-slate-600">Triggered by</dt><dd>{{ manifest.triggered_by or "—" }}</dd></div>
      <div><dt class="text-slate-600">Events</dt><dd>{{ manifest.n_events if manifest.n_events is not none else "—" }}</dd></div>
      <div><dt class="text-slate-600">Users with recommendations</dt><dd>{{ manifest.n_users_with_recommendations if manifest.n_users_with_recommendations is not none else "—" }}</dd></div>
      <div><dt class="text-slate-600">Models</dt><dd>{{ manifest.models or "—" }}</dd></div>
    </dl>
    {% if manifest.status == "failed" and manifest.error %}
      <pre class="mt-3 whitespace-pre-wrap rounded bg-red-100 p-2 text-xs text-red-900">{{ manifest.error }}</pre>
    {% endif %}
    {% if is_stale %}
      <p class="mt-3 text-sm text-amber-800" role="status">
        Stale: expected another run by {{ staleness.expected_next_run }}, none seen yet.
      </p>
    {% elif staleness.error %}
      <p class="mt-3 text-sm text-amber-800" role="status">
        Can't determine staleness: job.cron_schedule is misconfigured ({{ staleness.error }}).
      </p>
    {% endif %}
  </div>
{% else %}
  <h3 class="text-sm font-medium text-slate-800 mb-2">Latest run</h3>
  <div data-latest-run-empty class="rounded-lg border border-amber-300 bg-amber-50 p-4 mb-4 text-sm text-amber-800" role="status">
    No job runs recorded yet.
  </div>
{% endif %}

{% if events_enabled %}
  <div class="rounded-lg border border-slate-200 bg-white p-4 mb-4">
    <div class="flex items-center justify-between mb-2">
      <h3 class="text-sm font-medium text-slate-800">Incremental events</h3>
      <span class="text-xs text-slate-600">Source: {{ events_kind or "—" }}</span>
    </div>
    {% if incremental %}
      <dl class="grid grid-cols-2 gap-2 text-sm text-slate-700">
        <div><dt class="text-slate-600">Last flush</dt>
          <dd>
            {% if incremental.last_incremental_at %}
            <time
              datetime="{{ incremental.last_incremental_at }}"
              data-controller="time-ago"
              data-time-ago-value="{{ incremental.last_incremental_at }}"
            >{{ incremental.last_incremental_at }}</time>
            {% else %}
            —
            {% endif %}
          </dd>
        </div>
        <div><dt class="text-slate-600">Status</dt><dd>{{ status_badge(incremental.status) }}</dd></div>
        <div><dt class="text-slate-600">Events applied</dt>
          <dd>{{ incremental.events if incremental.events is not none else "—" }}</dd>
        </div>
        {% if incremental.online_users_refreshed is not none %}
        <div><dt class="text-slate-600">Online users refreshed</dt>
          <dd>{{ incremental.online_users_refreshed }}</dd>
        </div>
        {% endif %}
        {% if incremental.online_fit_partial_epochs is not none %}
        <div><dt class="text-slate-600">Online fit_partial epochs</dt>
          <dd>{{ incremental.online_fit_partial_epochs }}</dd>
        </div>
        {% endif %}
      </dl>
      {% if incremental.status == "failed" and incremental.error %}
        <pre class="mt-3 whitespace-pre-wrap rounded bg-red-100 p-2 text-xs text-red-900">{{ incremental.error }}</pre>
      {% endif %}
      <p class="mt-2 text-xs text-slate-600">
        Last successful flush from manifests. Live lag is on serve
        <code class="text-slate-700">/metrics</code>
        as <code class="text-slate-700">cicerone_events_source_lag</code>.
      </p>
    {% else %}
      <p class="text-sm text-slate-700">No incremental flushes recorded in recent manifests yet.</p>
      <p class="mt-2 text-xs text-slate-600">
        Live lag/backlog is on serve <code class="text-slate-700">/metrics</code>.
      </p>
    {% endif %}
  </div>
{% endif %}

{% if history %}
  <h3 class="text-sm font-medium text-slate-800 mb-2">Recent runs</h3>
  <div class="overflow-x-auto rounded-lg border border-slate-200 bg-white">
  <table class="w-full text-sm border-collapse">
    <caption class="sr-only">Recent job runs</caption>
    <thead>
      <tr class="text-left text-slate-600 border-b border-slate-200">
        <th scope="col" class="py-2 px-3">When</th>
        <th scope="col" class="py-2 px-3">Status</th>
        <th scope="col" class="py-2 px-3">Triggered by</th>
        <th scope="col" class="py-2 px-3">Error</th>
      </tr>
    </thead>
    <tbody>
      {% for run in history %}
      {% set is_current = manifest and (run.generated_at|string) == (manifest.generated_at|string) %}
      <tr class="border-b border-slate-100">
        <td class="py-2 px-3 text-slate-700 whitespace-nowrap">
          {% if is_current %}<span class="sr-only">Current. </span>{% endif %}
          {% if run.generated_at %}
          <time
            datetime="{{ run.generated_at }}"
            data-controller="time-ago"
            data-time-ago-value="{{ run.generated_at }}"
          >{{ run.generated_at }}</time>
          {% else %}
          —
          {% endif %}
        </td>
        <td class="py-2 px-3">
          {{ status_badge(run.status) }}
          {% if is_current %}
          <span class="ml-1 text-xs text-slate-600">current</span>
          {% endif %}
        </td>
        <td class="py-2 px-3 text-slate-700">{{ run.triggered_by or "—" }}</td>
        <td class="py-2 px-3">
          {% if run.error %}
          <details class="max-w-md">
            <summary class="cursor-pointer truncate text-red-800" title="{{ run.error }}">{{ run.error }}</summary>
            <pre class="mt-2 whitespace-pre-wrap text-xs text-red-900">{{ run.error }}</pre>
          </details>
          {% else %}
          <span class="text-slate-500">—</span>
          {% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  </div>
  {% if history|length == 1 %}
    <p class="mt-2 text-xs text-slate-600">
      Only the latest run is available for this output backend (a "dataset" output overwrites
      manifest.json every run -- switch to a "db" output for full history).
    </p>
  {% endif %}
{% endif %}