{% macro avatar(src, cls="cg-avatar") -%}
<img class="{{ cls }}" src="{{ src }}" alt="">
{%- endmacro %}

{% macro date_label(d) -%}
{{ d.strftime("%B ") }}{{ d.day }}, {{ d.year }}
{%- endmacro %}

{% macro time_label(ts) -%}
{{ ts.strftime("%I:%M").lstrip("0") }} {{ ts.strftime("%p") }}
{%- endmacro %}

{% macro time_24(ts) -%}
{{ ts.strftime("%H:%M") }}
{%- endmacro %}

{# Delivery ticks for messenger self-bubbles. `read_cls` colors the read state. #}
{% macro ticks(status, read_cls="cg-tick-read") -%}
{%- if status.value == "sending" %}<span class="cg-tick">🕓</span>
{%- elif status.value == "sent" %}<span class="cg-tick">✓</span>
{%- elif status.value == "delivered" %}<span class="cg-tick">✓✓</span>
{%- elif status.value == "read" %}<span class="cg-tick {{ read_cls }}">✓✓</span>
{%- endif -%}
{%- endmacro %}

{% macro reactions(msg, cls="cg-reactions") -%}
{% if msg.reactions %}<div class="cg-reaction-row {{ 'self' if msg.is_self else 'other' }}"><span class="{{ cls }}">{% for r in msg.reactions %}{{ r.emoji }}{% endfor %}</span></div>{% endif %}
{%- endmacro %}

{# Short preview of a replied-to message for a reply quote. #}
{% macro reply_snippet(rep) -%}
{%- set rt = rep.content.__class__.__name__ -%}
{%- if rt == "Text" -%}{{ rep.content.body }}
{%- else -%}{{ fallback_text(rep.content) }}{%- endif -%}
{%- endmacro %}

{# Quoted reply block shown at the top of a bubble. #}
{% macro reply_quote(rep, prefix) -%}
<span class="cg-reply {{ prefix }}-reply">
  <span class="cg-reply-name">{{ rep.sender.name }}</span>
  <span class="cg-reply-text">{{ reply_snippet(rep) }}</span>
</span>
{%- endmacro %}

{# Animated three-dot "typing…" indicator. #}
{% macro typing_dots() -%}
<span class="cg-typing"><i></i><i></i><i></i></span>
{%- endmacro %}

{# Inner UI of a voice message: play triangle, waveform, duration. No bubble. #}
{% macro voice_inner(content) -%}
<span class="cg-voice">
  <svg class="cg-voice-play" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg>
  <span class="cg-voice-wave">{% for h in [7,11,16,9,14,20,8,13,18,10,22,12,17,9,15,7,19,11,14,8,16,10,13,7] %}<i style="height:{{ h }}px"></i>{% endfor %}</span>
  <span class="cg-voice-dur">{{ '%d:%02d'|format(content.duration_seconds // 60, content.duration_seconds % 60) }}</span>
</span>
{%- endmacro %}

{# Routes a message's content to the right element for a platform, honoring
   capability degradation. `prefix` is the platform css class prefix (e.g. "wa"). #}
{% macro content_block(msg, caps, prefix) -%}
{% set side = "self" if msg.is_self else "other" %}
{% set t = msg.content.__class__.__name__ %}
{%- if not caps.supports(msg.content) -%}
<div class="cg-bubble {{ prefix }}-bubble {{ prefix }}-{{ side }}">{{ fallback_text(msg.content) }}</div>
{%- elif t == "Text" -%}
<div class="cg-bubble {{ prefix }}-bubble {{ prefix }}-{{ side }}">{% if msg.reply_to %}{{ reply_quote(msg.reply_to, prefix) }}{% endif %}{{ msg.content.body }}</div>
{%- elif t == "Voice" -%}
<div class="cg-bubble {{ prefix }}-bubble {{ prefix }}-{{ side }}">{{ voice_inner(msg.content) }}</div>
{%- elif t in ("Image", "GIF", "Sticker") -%}
{% set src = media_src(msg) %}
{% if src %}<img class="cg-img {{ prefix }}-img" src="{{ src }}" alt="">{% else %}<div class="cg-img cg-img-placeholder {{ prefix }}-img"></div>{% endif %}
{% if msg.content.caption is defined and msg.content.caption %}<div class="cg-bubble {{ prefix }}-bubble {{ prefix }}-{{ side }}">{{ msg.content.caption }}</div>{% endif %}
{%- elif t == "System" -%}
<div class="{{ prefix }}-system cg-system">{{ msg.content.text }}</div>
{%- else -%}
<div class="cg-bubble {{ prefix }}-bubble {{ prefix }}-{{ side }}">{{ fallback_text(msg.content) }}</div>
{%- endif -%}
{%- endmacro %}

{% macro fallback_text(content) -%}
{% set t = content.__class__.__name__ %}
{%- if t == "Voice" %}🎤 Voice message{% if content.duration_seconds %} · {{ content.duration_seconds }}s{% endif %}
{%- elif t == "File" %}📎 {{ content.name }}{% if content.size %} · {{ content.size }}{% endif %}
{%- elif t == "Location" %}📍 {{ content.label }}
{%- elif t == "Image" %}🖼 Photo
{%- elif t == "GIF" %}GIF
{%- elif t == "Sticker" %}Sticker
{%- elif t == "Text" %}{{ content.body }}
{%- else %}{{ content }}{% endif %}
{%- endmacro %}