{# Live region for the flow detail. Same idiom as #workers-list (workers.html):
   a STABLE wrapper that carries the trigger and morphs its OWN inner HTML - it is
   never replaced, so its sse listener is registered once and stays. While the flow
   is live it re-fetches flow_body.html on each job event; gated on flow_live, so a
   flow that is already terminal when you open it never polls (and htmx tears the
   trigger down when you navigate away). Its id is the job's own: every open flow
   row carries a region, and htmx resolves an id selector document-wide, so with two
   rows open a shared id sent both refreshes into the first row. The id goes
   through `dom_id` because a custom job id can hold anything a selector cannot. #}
{% if job and job.flow %}
<div class="col-span-2 flow-section" id="flow-section-{{ job.id|dom_id }}"
     {% if job.flow_live %}
     hx-get="{{ url_for('flow_fragment', name=job.queue or name, job_id=job.id).path }}{% if standalone %}?title=1{% endif %}"
     hx-trigger="sse:changed"
     hx-target="#flow-section-{{ job.id|dom_id }}" hx-swap="morph:innerHTML" hx-sync="this:queue last"
     {% endif %}>
  {% include "partials/flow_body.html" %}
</div>
{% endif %}