{% if manifest %}
  <div class="rounded-lg border p-4 mb-4 {{ 'border-red-300 bg-red-50' if manifest.status == 'failed' else 'border-emerald-300 bg-emerald-50' }}">
    <div class="flex items-center justify-between">
      <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium {{ 'bg-red-100 text-red-800' if manifest.status == 'failed' else 'bg-emerald-100 text-emerald-800' }}">
        {{ manifest.status or "unknown" }}
      </span>
      <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 w/ recs</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 %}
  </div>
{% else %}
  <div class="rounded-lg border border-amber-300 bg-amber-50 p-4 mb-4 text-sm text-amber-800">
    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">kind={{ 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>{{ incremental.status or "—" }}</dd></div>
        <div><dt class="text-slate-600">Events applied</dt>
          <dd>{{ incremental.events if incremental.events is not none else "—" }}</dd>
        </div>
      </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>
        (<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 manifest %}
  {% if staleness.is_stale %}
    <div class="rounded-lg border border-amber-300 bg-amber-50 p-4 mb-4 text-sm text-amber-800">
      Stale: expected another run by {{ staleness.expected_next_run }}, none seen yet.
    </div>
  {% elif staleness.error %}
    <div class="rounded-lg border border-amber-300 bg-amber-50 p-4 mb-4 text-sm text-amber-800">
      Can't determine staleness: job.cron_schedule is misconfigured ({{ staleness.error }}).
    </div>
  {% endif %}
{% endif %}

{% if history %}
  <table class="w-full text-sm border-collapse bg-white rounded-lg overflow-hidden shadow-sm">
    <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 %}
      <tr class="border-b border-slate-100">
        <td class="py-2 px-3 text-slate-700 whitespace-nowrap">{{ run.generated_at or "—" }}</td>
        <td class="py-2 px-3">
          <span class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium {{ 'bg-red-100 text-red-800' if run.status == 'failed' else 'bg-emerald-100 text-emerald-800' }}">
            {{ run.status or "unknown" }}
          </span>
        </td>
        <td class="py-2 px-3 text-slate-700">{{ run.triggered_by or "—" }}</td>
        <td class="py-2 px-3 text-red-800">{{ run.error or "—" }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% 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 %}