{% set cid = c.id if c.id else ("live-" ~ c.live_source) %}
{% set content_id = "live-content-" ~ (c.live_source if c.live_source else cid) %}
<div id="{{ cid }}"
     class="fcu-live fcu-card {{ c.css_class if c.css_class }}"
     data-live-source="{{ c.live_source }}"
     data-live-sse-url="{{ c._sse_url }}"
     data-live-poll-url="{{ c._poll_url }}"
     data-live-interval="{{ interval_ms }}"
     data-live-content-id="{{ content_id }}"
     data-live-format="{{ c.format }}"
     data-live-limit="{{ c.max_lines if c.max_lines is not none else 0 }}"
>
  {% if c.title %}
    <div class="fcu-card-header">
      <h3>{{ c.title }}</h3>
    </div>
  {% endif %}
  {# Announced when it appears, rather than being a purely visual warning. #}
  <div class="live-stale-indicator" role="status" style="display:none;padding:8px 16px;background:var(--fcu-surface-alt);color:var(--fcu-text-muted);font-size:0.95em;border-bottom:1px solid var(--fcu-border);"><span aria-hidden="true">&#9888;</span> {{ not_updating_text }}</div>
  {# Auto-updating content must be pausable (WCAG 2.2.2). The control is
     rendered server-side so it exists before the JS compiler runs, and is
     hidden without JS where there is nothing to pause. #}
  <div class="js-show" style="padding:4px 16px;">
    <button type="button" class="fcu-btn live-pause-btn" data-live-pause
            aria-pressed="false"
            data-pause-label="{{ pause_text }}"
            data-resume-label="{{ resume_text }}"
            style="padding:2px 10px;font-size:var(--fcu-font-size-sm);">
      <span data-live-pause-label>{{ pause_text }}</span>
    </button>
  </div>
  {# role="log" + aria-live=polite: new lines are announced as they arrive,
     without stealing focus. aria-atomic=false so only the addition is read,
     not the whole buffer each time. #}
  <div id="{{ content_id }}" class="fcu-card-body live-content"
       role="log" aria-live="polite" aria-atomic="false"
       {% if c.content_style %}style="{{ c.content_style }}"{% endif %}>
    {% if content_html is not none %}
      {{ content_html }}
    {% elif live_data is mapping %}
      {% for k, v in live_data.items() %}
        {% if k == "line" %}
          <div style="padding: 4px 0; border-bottom: 1px solid var(--fcu-border);">{{ v }}</div>
        {% elif v is list %}
          {% for item in v %}<div style="padding: 4px 0; border-bottom: 1px solid var(--fcu-border);">{{ item }}</div>{% endfor %}
        {% else %}
          <div style="display: flex; gap: 8px;"><strong>{{ k }}</strong><span>{{ v }}</span></div>
        {% endif %}
      {% endfor %}
    {% else %}
      {{ c.placeholder | safe }}
    {% endif %}
  </div>
  {# No <meta http-equiv="refresh"> fallback: an auto-reloading page with no
     way to stop it fails WCAG 2.2.1 (Timing Adjustable) and 3.2.5, and it
     also discards any work in progress on the page. No-JS users get a plain
     reload link instead, which they control. #}
  <noscript>
    <div class="fcu-card-footer" style="padding:8px 16px;">
      <a href="{{ current_url }}">{{ reload_text }}</a>
    </div>
  </noscript>
</div>