{% from "macros.html" import bar_color, icon, job_chip, empty_state with context %}
{% if job %}
<div class="px-5 py-4 border-t border-line bg-ink/40">
  <dl class="grid grid-cols-2 gap-x-6 gap-y-3 text-sm">
    {% if job.queue %}
    <div><dt class="label">queue</dt><dd class="font-mono">{{ job.queue }}</dd></div>
    {% endif %}
    {% if job.processed_on %}
    <div><dt class="label">processed</dt><dd class="font-mono" title="{{ job.processed_on|at }}">{{ job.processed_on|clockms }}</dd></div>
    {% endif %}
    {% if job.processed_on and job.finished_on %}
    <div><dt class="label">duration</dt>
      <dd class="font-mono">{{ (job.finished_on - job.processed_on)|dur }}</dd></div>
    {% endif %}
    {% if job.finished_on %}
    <div><dt class="label">finished</dt><dd class="font-mono" title="{{ job.finished_on|at }}">{{ job.finished_on|clockms }}</dd></div>
    {% endif %}

    {% if job.progress is not none %}
    <div class="col-span-2">
      <dt class="label mb-1">progress</dt>
      <dd>
        {% if job.progress is number %}
        <div class="flex items-center gap-2">
          <div class="flex-1 h-2 rounded-full bg-ink overflow-hidden">
            <div class="h-full {{ bar_color(job.state) }} rounded-full transition-all" style="width: {{ job.progress }}%"></div>
          </div>
          <span class="text-xs text-muted tabular-nums w-10 text-right">{{ job.progress }}%</span>
        </div>
        {% else %}
        <span class="font-mono text-fg">{{ job.progress|tojson }}</span>
        {% endif %}
      </dd>
    </div>
    {% endif %}

    {% if job.parent_id %}
    {# A flow child: one hop up to the parent that's waiting on it. #}
    <div class="col-span-2 flex items-center gap-2">
      <dt class="label flex items-center gap-1">
        {{ icon('flow', 'w-3.5 h-3.5') }} flow</dt>
      <dd class="text-sm flex items-center gap-1.5">part of {{ job_chip(job.queue or name, job.parent_id) }}</dd>
    </div>
    {% endif %}

    {% if job.flow %}{% include "partials/flow_section.html" %}{% endif %}

    <div class="col-span-2"><dt class="label mb-1">data</dt>
      <dd><pre class="jsonv well">{{ job.data|pretty }}</pre></dd></div>
    <div class="col-span-2"><dt class="label mb-1">opts</dt>
      <dd><pre class="jsonv well">{{ job.opts|pretty }}</pre></dd></div>
    {% if job.returnvalue is not none %}
    <div class="col-span-2"><dt class="label mb-1">result</dt>
      <dd><pre class="jsonv well">{{ job.returnvalue|pretty }}</pre></dd></div>
    {% endif %}

    {% if job.logs %}
    <div class="col-span-2">
      <dt class="label mb-1">logs</dt>
      <dd class="font-mono text-xs well max-h-40 space-y-0.5">
        {% for line in job.logs %}<div class="text-muted"><span class="text-accent/60 select-none">›</span> {{ line }}</div>{% endfor %}
      </dd>
    </div>
    {% endif %}

    {% if job.failed_reason %}
    <div class="col-span-2"><dt class="label">error</dt>
      <dd class="font-mono text-danger break-all">{{ job.failed_reason }}</dd></div>
    {% endif %}

    {% if job.stacktrace and show_stacktraces|default(true) %}
    <div class="col-span-2">
      <dt class="label mb-1">stack trace</dt>
      <dd><pre class="font-mono text-xs well max-h-56 text-danger whitespace-pre-wrap">{{ job.stacktrace }}</pre></dd>
    </div>
    {% endif %}
  </dl>
</div>
{% else %}
{{ empty_state('inbox', 'Job not found') }}
{% endif %}