{% if not profiles %}
<div class="mc-muted" style="font-size:11px; padding:4px;">
  No agents loaded
</div>
{% endif %}

{% for p in profiles %}
{% set color_map = {
  "cautious": "var(--amber)",
  "adventurous": "var(--green)",
  "analytical": "var(--purple)",
  "frustrated": "var(--red)",
  "confident": "var(--green)",
  "curious": "var(--orange)",
  "calm": "var(--text-dim)"
} %}
{% set emo_color = color_map.get(p.current_emotion, "var(--text-dim)") %}
<div class="mc-emotion-row" style="margin-bottom:8px; padding:6px 8px; border-left:3px solid {{ emo_color }};">
  <div class="d-flex justify-content-between align-items-center" style="margin-bottom:2px;">
    <span style="font-size:11px; font-weight:bold; letter-spacing:.08em; color:var(--text-bright);">
      {{ p.agent_name | upper | e }}
    </span>
    <span style="font-size:10px; color:{{ emo_color }}; letter-spacing:.06em;">
      {{ p.emotion_label | e }}
    </span>
  </div>
  <div style="margin-bottom:4px;">
    <div style="height:4px; background:var(--bg-deep); border-radius:2px; overflow:hidden;">
      <div style="height:100%; width:{{ (p.intensity * 100) | int }}%; background:{{ emo_color }}; border-radius:2px; transition:width 0.3s;"></div>
    </div>
  </div>
  <div style="font-size:9px; color:var(--text-dim); letter-spacing:.06em;">
    {{ p.intensity_label | upper | e }}
    {% if p.trigger_event %} · {{ p.trigger_event | replace("_", " ") | upper | e }}{% endif %}
  </div>
</div>
{% endfor %}
