{% comment %}
Sync freshness indicator for Module A pages.
Expects template context: `last_synced_at` (ISO string or None),
`sync_failed` (bool), `sync_error` (string).
{% endcomment %}
<div class="flex items-center gap-2 text-xs">
    {% if last_synced_at %}
        <span class="text-muted-foreground">
            Synced from server at {{ last_synced_at|slice:":19"|cut:"T" }} UTC
        </span>
    {% else %}
        <span class="text-muted-foreground">Never synced from backend</span>
    {% endif %}

    {% if sync_failed %}
        <span class="inline-flex items-center gap-1 px-2 py-1 rounded-full bg-amber-50 text-amber-800 border border-amber-200"
              title="{{ sync_error }}">
            <svg class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/></svg>
            Sync with server failed — showing cached data
        </span>
    {% endif %}
</div>