{% 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 %}
  <div class="live-stale-indicator" 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);">&#9888; {{ not_updating_text }}</div>
  <div id="{{ content_id }}" class="fcu-card-body live-content"
       {% 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>
  <noscript>
    <meta http-equiv="refresh" content="{{ c._resolved_interval }}">
  </noscript>
</div>