{# Inline action status indicator, polled via HTMX every 2s while any action is running. #}
{# When all actions are idle/done/error, polling attribute is omitted to self-terminate. #}
{# Completed banners are consumed server-side (shown once); client-side 8s auto-dismiss #}
{# and a × button provide immediate control before the next poll fires. #}
{% set any_running = statuses.values() | selectattr("state", "equalto", "running") | list | length > 0 %}
{% set any_completed = statuses.values() | selectattr("state", "in", ["done", "error", "info"]) | list | length > 0 %}
<span id="action-status"
  {% if any_running %}
  hx-get="/actions/status?format=html"
  hx-trigger="every 2s"
  hx-swap="outerHTML"
  hx-target="#action-status"
  {% endif %}>
  {% for name, st in statuses.items() %}
    {% if st.state == "running" %}
      <span class="action-indicator action-running">&#9203; {{ name }}{% if st.message %}: {{ st.message }}{% else %}&hellip;{% endif %}</span>
    {% elif st.state == "done" and st.message %}
      <span class="action-indicator action-done" id="action-banner-{{ name }}">&#10003; {{ name }}: {{ st.message }}
        <button type="button" onclick="document.getElementById('action-banner-{{ name }}').remove()"
          style="background:none;border:none;cursor:pointer;font-size:0.9rem;padding:0 0.25rem;
                 color:inherit;opacity:0.7;line-height:1" aria-label="Dismiss">×</button>
      </span>
    {% elif st.state == "error" and st.message %}
      <span class="action-indicator action-error" id="action-banner-{{ name }}">&#10007; {{ name }}: {{ st.message }}
        <button type="button" onclick="document.getElementById('action-banner-{{ name }}').remove()"
          style="background:none;border:none;cursor:pointer;font-size:0.9rem;padding:0 0.25rem;
                 color:inherit;opacity:0.7;line-height:1" aria-label="Dismiss">×</button>
      </span>
    {% elif st.state == "info" and st.message %}
      <span class="action-indicator action-info" id="action-banner-{{ name }}">&#8505; {{ name }}: {{ st.message }}
        <button type="button" onclick="document.getElementById('action-banner-{{ name }}').remove()"
          style="background:none;border:none;cursor:pointer;font-size:0.9rem;padding:0 0.25rem;
                 color:inherit;opacity:0.7;line-height:1" aria-label="Dismiss">×</button>
      </span>
    {% endif %}
  {% endfor %}
  {% if any_completed %}
  <script>
    (function() {
      var ids = [{% for name, st in statuses.items() %}{% if st.state in ["done","error","info"] and st.message %}"action-banner-{{ name }}"{% if not loop.last %},{% endif %}{% endif %}{% endfor %}];
      ids.forEach(function(id) {
        var el = document.getElementById(id);
        if (el) { setTimeout(function() { if (el.parentNode) { el.remove(); } }, 8000); }
      });
    })();
  </script>
  {% endif %}
</span>