{% from "_macros.html" import icon %}
{#
  How many commands are still running on the far side.

  Rendered even at zero, and that is not a stylistic choice: this element
  carries the `hx-trigger` that polls, so a fragment that collapsed to nothing
  would replace itself with nothing and stop polling -- the first job started
  afterwards would never appear, and the chip would look broken in exactly the
  way a background job is hardest to notice.

  Swapped `outerHTML` onto itself, so the reply is the whole element including
  the trigger. Every response has to be a complete chip for the same reason.
#}
<div class="composer__jobs" id="jobs-chip"
     hx-get="/api/chats/{{ chat.id }}/jobs"
     hx-trigger="every 5s"
     hx-swap="outerHTML">
  {% if running %}
  <div class="picker picker--up" data-picker>
    <button class="btn btn--sm composer__chip composer__chip--jobs" type="button"
            data-picker-toggle aria-haspopup="menu" aria-expanded="false"
            hx-get="/api/chats/{{ chat.id }}/jobs/panel"
            hx-target="#jobs-panel" hx-swap="innerHTML"
            title="{{ running }} background {{ 'job' if running == 1 else 'jobs' }} running">
      {{ icon("clock", "icon--sm") }}
      <span>{{ running }} {{ 'job' if running == 1 else 'jobs' }}</span>
    </button>

    {# Filled by the button above rather than rendered here: the panel needs one
       SSH round trip per expanded log, and the chip is polled every five
       seconds. Rendering it inside the poll would fetch output nobody has
       opened, on a loop. #}
    <div class="picker__menu picker__menu--jobs" data-picker-menu role="menu"
         hidden aria-label="Background jobs" id="jobs-panel"></div>
  </div>
  {% endif %}
</div>