{# Sync progress fragment -- HTMX polls every 2s until done/error.
   hx-trigger is intentionally present so polling continues. #}
<div id="sync-status"
     hx-get="{{ url_for('sync.sync_status', session_id=session_id) }}"
     hx-trigger="every 2s"
     hx-target="this"
     hx-swap="outerHTML"
     class="flex items-center gap-2">
  <svg class="animate-spin h-4 w-4 text-emerald-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
  </svg>
  <span class="text-sm text-emerald-400">{{ phase_label }}</span>
</div>