{% from "macros.html" import icon, state_color %}
<div class="p-5">
  <div class="flex items-center gap-3 mb-5 min-w-0">
    {# Back to wherever the reader came from (server-derived from HX-Current-URL),
       falling back to the queue on a deep link or any render that omits it. #}
    {% set back = back_href|default('', true) or url_for('queue_view', name=name).path %}
    <a href="{{ back }}" hx-get="{{ back }}"
       hx-target="#queue-panel" hx-push-url="true"
       class="btn btn-ghost btn-sm shrink-0">{{ icon('chevron', 'w-4 h-4 rotate-90') }} {{ name }}</a>
    <h1 class="text-lg font-semibold flex items-center gap-2 min-w-0">
      <span class="font-mono text-muted shrink-0">#{{ job_id }}</span>
      {% if job %}
      <span class="truncate">{{ job.name }}</span>
      {# annotations ride inside the title group: badge-gap rule is gap-2 #}
      <span id="job-state-pill" class="text-xs px-1.5 py-0.5 rounded-md shrink-0 {{ state_color(job.state) }}">{{ job.state }}</span>
      <span class="text-xs text-muted tabular-nums shrink-0">{{ job.attempts_made }}×</span>
      {% endif %}
    </h1>
  </div>
  {# standalone page: the live flow fragment also OOB-updates the title pill above
     (the accordion has no such pill, so it omits the OOB) #}
  {% set standalone = true %}
  <div class="card">
    {% include "partials/job_detail.html" %}
  </div>
</div>